Question

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

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

＆＃13;

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

＆＃13;

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);
}

＆＃13;

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

＆＃13;

先谢谢。

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

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

2 个答案: