Question

我不确定如何使用jQuery访问此元素。

当用户将鼠标悬停在图像内的链接上时，我希望隐藏隐藏的类。

这只是众多列表中的一个菜单项，所以我需要一种方法来实现$this

<ul class="menu">
    <li>
        <ul>
            <li class="hidden">
                <div class="container">
                    <div class="one"></div>
                    <div class="two"></div>
                    <div class="three"></div>
                    <div class="four"></div>
                    <div class="five"></div>
                    <div class="six"></div>
                </div>
            </li>
            <li>
                <img src="images/sample.svg" /><a href="#">Sample</a>
            </li>
        </ul>
    </li>
</ul

我徒劳无功：

$('.menu>li>ul>li:last-child>img>a').hover(function() {
    $(this).parent().parent().child().removeClass('hidden');
}, function() {
    $(this).parent().parent().child().addClass('hidden');
});

Answer 1

使用closest()和prev()

＆＃13;

$('.menu [href]').hover(function() {
  $(this).closest('li').prev('li').removeClass('hidden');
}, function() {
  $(this).closest('li').prev('li').addClass('hidden');
});

＆＃13;

.hidden {
  display: none;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<ul class="menu">
  <li>
    <ul>
      <li class="hidden">
        <div class="container">
          <div class="one"></div>
          <div class="two"></div>
          <div class="three"></div>
          <div class="four"></div>
          <div class="five"></div>
          <div class="six"></div>
        </div>
      </li>
      <li>
        <img src="images/sample.svg" /><a href="#">Sample</a>
      </li>
    </ul>
  </li>
</ul>

＆＃13;

Answer 2

$('.menu').find('[href]').hover(function(){
  $(this).closest('li').prev('li').removeClass('hidden');
  }, function(){
  $(this).closest('li').prev('li').addClass('hidden');
  });

如何使用jQuery访问此列表元素

2 个答案: