hover 요소에만 효과를 적용하려면 어떻게해야합니까?

Question

단일 목록 항목 위에 마우스를 올려 놓으면 나머지 목록 항목 모두에 대해 효과가 표시됩니다. 단일 목록 항목에 대한 효과를 보여주고 싶습니다.

<script>  
    $(document).ready(function(){ 
     $('.thumbs li a').hover(function(){ 
      $('.thumbs li a').find('div').css({'opacity':'1'}); 
      }, 
      function(){ 
      $('.thumbs li a').find('div').css({'opacity':'0'}); 
      }); 
    });  
</script> 

<div id="thumbs-wrapper"> 
<ul class="thumbs"> 
<li> <a href="#"><img src="images/Adrian_Shaughnessy-325x325.png" /> 
    <div><h2> This is image 1</h2> </div></a> 
    </li> 
<li><a href="#"><img src="images/allan_yu-325x325.jpg" /> 
<div><h2> This is image 2</h2> </div></a> 
    </li> 
<li><a href="#"><img src="images/armin_vit_secrethandshake-325x325.jpg" /> 
<div><h2> This is image 3</h2> </div></a> 
    </li> 
<li><a href="#"><img src="images/bburwell_Tsh-325x325.jpg" /> 
<div><h2> This is image 4</h2> </div></a> 
    </li> 
<li><a href="#"><img src="images/beverly_fresh_2-325x325.jpg" /> 
<div><h2> This is image 5</h2> </div></a> 
    </li> 

     </ul> 
</div> 

Answer 1

사용 $(this) 대신 $('.thumbs li a')이 대신 선택 $('.thumbs li a')에 의해 반환되는 모든 요소의 이벤트 triggred element하는 소스에서 div을 찾을 : 여기

는 코드입니다.

$(document).ready(function(){ 
     $('.thumbs li a').hover(function(){ 
      $(this).find('div').css({'opacity':'1'}); 
     }, 
     function(){ 
      $(this).find('div').css({'opacity':'0'}); 
     }); 
}); 

Answer 2

이 작업을 수행 할 수 있습니다

$(document).ready(function() { 
    $('.thumbs li a').hover(function() { 
     $(this).find('div').css({ 
      'opacity': '1' 
     }); 
    }, 
    function() { 
     $(this).find('div').css({ 
      'opacity': '0' 
     }); 
    }); 
}); 

• $('.thumbs li a').find('div')
  모든 앵커 내부의 모든 div를 가져옵니다.
• $(this).find('div')은 현재 앵커 내부에있는 특정 div 만 가져옵니다.

Answer 3

$(document).ready(function(){ 
    $('.thumbs li a').hover(function(){ 
     $(this).closest('div').css({'opacity':'1'}); 
     }, 
     function(){ 
     $(this).closest('div').css({'opacity':'0'}); 
     }); 
}); 

Answer 4

U이

$(document).ready(function(){ 
     $('.thumbs li a').hover(function(){ 
      $(this).find('div').css({'opacity':'1'}); 
      }, 
      function(){ 
      $(this).find('div').css({'opacity':'0'}); 
      }); 
}); 

같은 시도 할 수 있습니다