JQuery div скрывается, когда он не должен

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 событие из <img> пузырится до .file элемента, и, следовательно, вызывая ваш код, чтобы скрыть <div>. Используйте mouseleave событие (которое не реагирует на события кипящим) вместо:

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

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/