我有一个足球运动员的桌子,所有球员的名字都是超链接。当用户单击链接时,灯箱事件将启动并显示所选玩家的图片。所以我想发生的是,当用户将鼠标悬停在链接上时,会显示实际玩家图片的缩略图。
像这样简单地说:
<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;
以避免移动文档其余部分中的其他元素。