在链接悬停时显示图像

Question

I have a number of names in a list like so:

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

I would like to display next to the cursor an image thumbnail which relates to each name on mouse hover. Is this possible with jquery?

Thanks heaps. Pia

Answer 1

Here is a basic implementation of hover popup:

$('.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/

You can alter contents of the popup based on which element is hovered (for example, by using http://api.jquery.com/jQuery.data/ )

Example of using data attribute: http://jsfiddle.net/CaQUY/1/

Answer 2

Here is a javascript solution to show image thumbnail on hover.

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

If you want to know more on how to use it visit " Show image thumbnail on hover "