호버에 앵커 태그 내의 이미지 태그에 클래스를 추가하는 방법은 무엇입니까?

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