将图像悬停在光标旁边并显示它

时间:2012-02-28 08:44:52

标签: jquery

我想知道是否有一种方法可以显示与您在光标旁边悬停的不同大小相同的图像?在mouseout上,它应该消失。

3 个答案:

答案 0 :(得分:4)

这样的东西会起作用。根据您的需求调整。 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();
});

答案 1 :(得分:0)

这是一种简单的方法。

标记结构

<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:我不打算测试这段代码,因为我完全同意@OptimusCrime

Demo

答案 2 :(得分:0)

我相信这就是你想要的。

http://jsfiddle.net/BaDCe/