CODEWITHSUNDEEP
jquery
Johan
Johan

Reputation: 35194

Hover image and show it next to the cursor

I would like to know if there is a way to show the same image as you are hovering, with a different size, next to the cursor? And on mouseout, it should disappear.

Upvotes: 0

Views: 7242

Answers (3)

elclanrs
elclanrs

Reputation: 94101

Something like this will work. Adjust to your needs. http://jsfiddle.net/elclanrs/jF27b/

var $img = $('img');
$img.hide();
$('div').mousemove(function(e) {
    $img.stop(1, 1).fadeIn();
    $('img').offset({
        top: e.pageY - $img.outerHeight(),
        left: e.pageX - $img.outerWidth()
    });
}).mouseleave(function() {
    $img.fadeOut();
});

Upvotes: 5

Starx
Starx

Reputation: 78991

Here is a simple way you can do it.

Markup Structure

<li class="thumb">
    <img class="small" src="http://stackoverflow.com/" />
    <img class="large" src="someimage.jpg" />
</li>

jQuery Snippet

$(".thumb").mouseover(function() {    
   $(this).children(".large").show();
}).mouseout(function() {
   $(this).children(".large").hide();
});

P.S: I am not going to test this code to work, because I completely agree with @OptimusCrime

Demo

Upvotes: 0

Adam Merrifield
Adam Merrifield

Reputation: 10407

I believe this is what you want.

http://jsfiddle.net/BaDCe/

Upvotes: 0

Related Questions