February 28, 2012
Hover image and show it next to the cursor
Question by Johan
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.
Answer by elclanrs
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();
});
Answer by Starx
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
