jquery - 如何在悬停时向 anchor 标记内的图像标记添加类？

Question

我想在悬停时向 anchor 标记内的图像标记添加一个类，我正在使用 LightGallery展示我的作品并使用cssgram悬停时过滤。该类应添加到 <img class="img-responsive" src="assets/865-6219.jpg">并保留 img-responsive 类。

HTML 和 CSS 工作正常。只有 jQuery 代码可能并不完美。这是我的代码，请帮助。

$("#gallery li a").hover(function(){
  $(this).find("img").addClass("inkwell");
},function() {
  $(this).find("img").removeClass(" ");
});

ul>li{
  display:inline-block;
  width: calc(100%/4 - 0px);
}

.nak-gallery > ul > li a {
  border-radius: 3px;
  display: block;
  overflow: hidden;
  position: relative;
  float: left;
  height: 270px;
  width: 100%;
}

.nlg1>ul>li {
  margin-bottom: -5px;
  display: inline-block;
  margin-right: -4px;
  margin-left: 0px;
  list-style: outside none none;
}

.nak-gallery > ul > li a > img {
  -webkit-transition: -webkit-transform 0.15s ease 0s;
  -moz-transition: -moz-transform 0.15s ease 0s;
  -o-transition: -o-transform 0.15s ease 0s;
  transition: transform 0.15s ease 0s;
  -webkit-transform: scale3d(1.1, 1.1, 1.1);
  transform: scale3d(1.1, 1.1, 1.1);
  height: 100%;
  width: 100%;
}

.nak-gallery > ul > li a:hover > img {
  -webkit-transition: -webkit-transform 0.15s ease 0s;
  -moz-transition: -moz-transform 0.15s ease 0s;
  -o-transition: -o-transform 0.15s ease 0s;
  transition: transform 0.15s ease 0s;
  -webkit-transform: scale3d(1, 1, 1);
  transform: scale3d(1, 1, 1);
}

<div class="nak-gallery nlg1">
  <ul id="gallery">
    <li data-src="assets/865-6219.jpg" data-sub-html="#title">
      <a href="">
        <img class="img-responsive" src="assets/865-6219.jpg">
        <div class="nak-gallery-poster">
          <img class="icon">
        </div>
      </a>
    </li>
  </ul>
</div>

提前致谢。

Answer 1

$("#gallery li a").hover(function() {
  $($(this).find("img")[0]).addClass("inkwell");
}, function() {
  $($(this).find("img")[0]).removeClass("inkwell");
});

根据您的 html 结构 - 它在 anchor 标记内有两个 img 标记。因此，当您尝试 .find('img') 时，它会返回数组。上面的代码将仅拉取您要添加类的第一个数组元素