Question

我有一张图片，当我将鼠标悬停在图片上时，其下方会显示选项。当我向下移动他们隐藏的选项时。我已经设置了slideUp，直到用户离开父div

$('.file-options').hide();
$('.file a img').mouseover(function(){
    $(this).closest('.file').find('.file-options').slideDown();
});
$('.file a img').closest('.file').mouseout(function(){
    $(this).find('.file-options').slideUp();
});

<div class="document">
  <div class="file">
    <a href="#"><img src="http://www.dermalog.com/images/pdf-icon.png" alt=""></a>
    <div class="file-options showhouse-text">
        <a href="#" onclick="return confirm('Are you sure you want to delete this file?');" class="show-tooltip" data-html="true" data-placement="top" data-original-title="Delete File">D</a>
        <a href="#" class="show-tooltip" data-html="true" data-placement="top" data-original-title="Edit File">E</a>
    </div>
  </div>
</div>

这是jsfiddle http://jsfiddle.net/5vAFh/2/

Answer 1

来自mouseout的{{1}}事件正在冒泡到<img>元素，因此会触发您的代码隐藏.file。使用<div>事件（对事件冒泡没有反应）：

mouseleave

Demo

Answer 2

或您可以这样做：演示 http://jsfiddle.net/USBRy/

检查if(!$(this).is(':hover')) {

希望这有助于:)

<强>码

$('.file-options').hide();

$('.file a img').mouseover(function () {
    $(this).closest('.file').find('.file-options').slideDown();
});

$('.file a img').closest('.file').mouseout(function (e) {
    if(!$(this).is(':hover')) {
        $(this).find('.file-options').slideUp();
    }
});

Answer 3

你快到了..试试这个：

$('.file-options').hide();

$('.file').mouseover(function(){
    $(this).find('.file-options').slideDown();
});

$('.file').mouseout(function(e){
    if($(e.toElement).parents('.file').length < 1) {
       $(this).find('.file-options').slideUp();
    };
});

http://jsfiddle.net/5vAFh/12/

Jquery div隐藏的时候不应该

3 个答案: