user1736794 user1736794 - 3 years ago 155
Javascript Question

Display Image on Link Hover

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 Source

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/

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download