使用jQuery查找

Question

多亏了帮助，我才能让幻灯片正常工作。我需要它，这样. .file选项将一直保持切换，直到鼠标离开.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();
        }
    );