我的列表中有很多名字,如下所示:
<div class="names">
<ul>
<li><a href=#name1">name1</a></li>
<li><a href=#name2">name2</a></li>
<li><a href=#name3">name3</a></li>
<li><a href=#name4">name4</a></li>
<li><a href=#name5">name5</a></li>
</ul>
</div>
我想在光标旁边显示与鼠标悬停时的每个名称相关的图像缩略图。这可以用 jquery 实现吗?
非常感谢。皮亚
最佳答案
这是悬停弹出窗口的基本实现:
$('.names a').on('mouseenter', function(evt){
$('.popup').css({left: evt.pageX+30, top: evt.pageY-15}).show();
$(this).on('mouseleave', function(){
$('.popup').hide();
});
});
您可以根据悬停的元素更改弹出窗口的内容(例如,使用 http://api.jquery.com/jQuery.data/ )
使用数据属性的示例:http://jsfiddle.net/CaQUY/1/
关于javascript - 在链接悬停时显示图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12989529/