ホバーのアンカータグ内の画像タグにクラスを追加するにはどうすればよいですか？

Question

ホバー上のアンカータグ内の画像タグにクラスを追加したいと考えています。LightGalleryを使用して作品を表示し、ホバー上のcssgramフィルターを使用しています。クラスは<img class="img-responsive" src="assets/865-6219.jpg">に追加する必要があり、img対応クラスも保持してください。

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構造によると、アンカータグの中に2つのimgタグがあります。したがって、.find('img')を試したときに配列を返します。 上記のコードでは、クラスを追加したい最初の配列要素のみを取得します

Answer 2

@KamalakhananあなたのHTMLは正しく描画されません。 リストタグを確認してください。

HTMLタグの構文<li></li>

しかし、あなたは<li <a href="" ..</li> アンカータグに閉じていないと書いたが、

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

非常に慎重にスクリプトでもう一度、あなたのHTMLをチェックし、私はこのコードを置き、一度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>';