Question

由于帮助，我得到了滑动工作。我需要它，以便.file-options将保持切换，直到鼠标离开.file div而不是.file img。当您将鼠标悬停在pdf图像http://jsfiddle.net/5vAFh/

上时，您可以看到此处会发生什么

<div class="file">
    <a href="#"><img src="{$assets_url}img/file-icons/doc.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"><i class="icon-trash"></i></a>
        <a href="#" class="show-tooltip" data-html="true" data-placement="top" data-original-title="Edit File"><i class="icon-edit"></i></a>
    </div>
</div>


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

Answer 1

您需要遍历树。首先找到file，然后查找它的孩子：

$('.file-options').hide();
  $('.file img').hover(
    function() {
      $(this).closest(".file").find('.file-options').slideToggle();
    }, function() {
      $(this).closest(".file").find('.file-options').slideToggle();
    }
);

或者，如果您知道DOM不会更改，请获取父a，然后获取父div：

$(this).parent().parent().find(".file-options");

Answer 2

尝试这样的事情

    $('.file-options').hide();
      $('.file img').hover(
        function() {
          $(this).next('.file-options').slideToggle();
        }, function() {
          $(this).next('.file-options').slideToggle();
        }
    );

使用jQuery在其中查找子项

2 个答案: