0

我在列表中有很多名字，如下所示：

<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吗？

多谢了。皮亚

4

2 回答 2

5

这是悬停弹出窗口的基本实现：

$('.names a').on('mouseenter', function(evt){
    $('.popup').css({left: evt.pageX+30, top: evt.pageY-15}).show();
    $(this).on('mouseleave', function(){
        $('.popup').hide();
    });
});

http://jsfiddle.net/CaQUY/

您可以根据悬停的元素更改弹出窗口的内容（例如，通过使用http://api.jquery.com/jQuery.data/）

使用数据属性示例：http: //jsfiddle.net/CaQUY/1/

于 2012-10-21T13:14:12.637 回答
4

这是一个在悬停时显示图像缩略图的 javascript 解决方案。

<p id="p1"><a href="https://cnet.com">Cnet</a></p>
<p id="p2"><a href="https://codegena.com">Codegena</a></p>
<p id="p3"><a href="https://apple.com">Apple</a></p>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
  <link href="https://codegena.com/assets/css/image-preview-for-link.css" rel="stylesheet">     
  <script type="text/javascript">
    $(function() {
                $('#p1 a').miniPreview({ prefetch: 'pageload' });
                $('#p2 a').miniPreview({ prefetch: 'parenthover' });
                $('#p3 a').miniPreview({ prefetch: 'none' });
            });
  </script> <script src="https://codegena.com/assets/js/image-preview-for-link.js"></script>

如果您想了解有关如何使用它的更多信息，请访问“在悬停时显示图像缩略图”

于 2015-08-29T08:23:19.520 回答