1

我有一张图片，当我将鼠标悬停在它上面时，选项会出现在它的下方。当我向下移动到他们隐藏的选项时。我已将 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/

4

3 回答 3

4

来自的mouseout事件<img>冒泡到.file元素，因此触发您的代码隐藏<div>. 改用mouseleave事件（不对事件冒泡做出反应）：

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

演示

于 2013-10-09T09:46:08.000 回答
0

或者你可以这样做：演示 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();
    }
});
于 2013-10-09T09:50:31.817 回答
0

你快到了..试试这个：

$('.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/

于 2013-10-09T09:51:32.590 回答