Question

我有这段代码

<div class="img-thumbnail pull-left">
    <img id="female" src="public/img/femaleMini.jpg">
    <div id="imgOverflow" class="text-center"><span class="glyphicon glyphicon-zoom-in"></span> Click</div>
</div>

我无法理解我如何正常显示和隐藏div #imgOverflow。我需要它在鼠标悬停在图像上时可见，并且当鼠标悬停在溢出的块上时仍然可见。当鼠标离开img时隐藏它。也许这是一个愚蠢的问题，但我无法自己解决。

Answer 1

您可以使用简单的jquery mouseover，mouseout .example

$(document).ready(function(){
    $("#female").mouseover(function(){
        $("#imgOverflow").css('visibility','visible');
    }).mouseout(function(){
       $("#imgOverflow").css('visibility','hidden');
    });
});

http://jsfiddle.net/H5Yy2/

Answer 2

您需要将.hover()处理程序附加到映像，然后将.mouseout()处理程序附加到溢出。这是一种方法;请注意我正在使用标记中的显式ID，但如果需要重新使用，可以使用类和引用兄弟姐妹。

$('#female').hover(function(){
    $('#imgOverflow').show();
}, function(){
    setTimeout(function(){
        if(!$('#imgOverflow').is(':hover'))
            $('#imgOverflow').hide();
    },100);
});
$('#imgOverflow').mouseout(function(){
    $(this).hide();
});

鼠标输出图像的小（1/10秒）延迟的原因是为了确保溢出不会立即隐藏。这种延迟使函数有机会看到用户所做的是从图像移动到溢出。

jsFiddle：http://jsfiddle.net/6Y98U/

Answer 3

这里：

$('.img-thumbnail').on({

    'mouseover': function() { $('#imgOverflow').fadeIn(); },

    'mouseleave': function() { $('#imgOverflow').hide(); }
});

clicky例如 - ＆gt; http://jsfiddle.net/yEpgx/3/

注意：这适用于jquery v1.7-＆gt;

Answer 4

你需要保留她隐藏的div，加上你的CSS：

#imgOverflow{display:none;}

和jQuery

$('img#female').mouseover(function(){
    $('#imgOverflow').fadeIn('slow');
}).mouseout(function(){
    $('#imgOverflow').fadeOut('slow');
});

示例： JSFiddle

Jquery fadein麻烦

4 个答案: