选择大孩子元素

Question

我正在努力在列表中选择我的img元素，因此我可以打开和关闭其类。 我尝试了不同的方法来选择它，但是即使将鼠标悬停在列表的第二/第三/ ... div上，它的列表中的第一张图片也会亮起。

<ul>
  <li>
    <div class="container" onmouseover="toggleImgColor()" onmouseout="toggleImgColor()">
      <div class="container-title">
        <h3 class="title />
        <img id="pic" class="greyImg" />
      </div>
      ...
    </div>
  </li>
  ...
</ul>

Java脚本

function toggleImgColor() {
  $(this).find("img").toggleClass("greyImg");
}

Answer 1

您可以执行以下操作：

$(document).ready(function(){
   $(".container").hover(function() {
      $("#pic").toggleClass("greyImg");
   });
});

Answer 2

只是通过this内部toggleImgColor()在HTML像toggleImgColor(this) ，并赶上在javascript函数的参数。 这会将当前悬停的DOM对象传递给toggleImgColor函数，然后您可以使用该对象显示特定的div。

HTML：

<ul>
  <li>
    <div class="container" onmouseover="toggleImgColor(this)" onmouseout="toggleImgColor(this)">
      <div class="container-title">
        <h3 class="title />
        <img class="greyImg" />
      </div>
      ...
    </div>
  </li>
  ...
</ul>

JavaScript：

function toggleImgColor(item) {
  $(item).find("img").toggleClass("greyImg");
}