悬停超链接时显示 Img 缩略图(JQuery、CSS?)



我有一个足球运动员的桌子,所有球员的名字都是超链接。当用户单击链接时,灯箱事件将启动并显示所选玩家的图片。所以我想发生的是,当用户将鼠标悬停在链接上时,会显示实际玩家图片的缩略图。

像这样简单地说:

<a href="">
    Player name
    <img src="thumb.jpg">
</a>
<style>
a {position: relative;}
img {display: none; width: 100px; height: 100px; background: red; position: absolute; top: 20px; left: 0;}
a:hover img {display: block;}
</style>

http://jsfiddle.net/zrcgfmh7/

图像已position: absolute;以避免移动文档其余部分中的其他元素。

最新更新