如何在悬停时向锚标记内的图像标记添加 class？

Question

我想在鼠标悬停时将 class 添加到锚标记内的图像标记，我在鼠标悬停时使用 LightGallery to display my works and using cssgram 过滤器。 class 应添加到 <img class="img-responsive" src="assets/865-6219.jpg"> 并保持 img 响应 class.

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') 时，它是 returns 数组。上面的代码将只拉第一个数组元素，你想添加一个 class

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>';

如何在悬停时向锚标记内的图像标记添加 class？

How to add a class to the image tag within anchor tag on hover?

css

jquery

class

effects

hover