如何在悬停时将类添加到锚标签内的图像标签？

Question

我想在悬停时为锚标签内的图像标签添加一个类，我使用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 结构 - 它在锚标记内有两个 img 标记。因此，当您尝试 .find('img') 时，它会返回数组。 上面的代码将只提取您要添加类的第一个数组元素

Answer 2

@Kamalakhanan 您的 HTML 未正确呈现。 检查您的列表标签。

HTML 标签语法<li></li>

但是你写了<li <a href="" ..</li> 锚标记未关闭，再次非常仔细地检查您的 HTML 脚本

<ul id="lightgallery">
  <li data-src="http://unsplash.com/photos/GYNxcQvBNzA/download">
    <a href="">
      <img class="img-responsive" src="http://unsplash.com/photos/GYNxcQvBNzA/download">
      <div class="nak-gallery-poster">
        <img class="icon">
      </div>
    </a>
  </li>
  <li data-src="http://unsplash.com/photos/hx6kTWs1sHI/download">
    <a href="">
      <img class="img-responsive" src="http://unsplash.com/photos/hx6kTWs1sHI/download">
      <div class="nak-gallery-poster">
        <img class="icon">
      </div>
    </a>
  </li>
  <li data-src="http://unsplash.com/photos/i2JDnMDMYv8/download" <a="" href=""><img class="img-responsive" src="http://unsplash.com/photos/i2JDnMDMYv8/download">
    <div class="nak-gallery-poster"><img class="icon"></div>
  </li>
</ul>

我更正了一次 ypur 脚本变量检查，将此代码放在您放置幻灯片变量的脚本中。

var slide = '<li data-src="http://unsplash.com/photos/i2JDnMDMYv8/download">'+
  '<a href="">' +
  '<img class="img-responsive" src="http://unsplash.com/photos/i2JDnMDMYv8/download">' +
  '<div class="nak-gallery-poster">' +
  '<img class="icon">' +
  '</div>' +
  '</a></li>';