Как применить эффект только к зависающему элементу?

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') найти div в источнике element, что triggred событие вместо всех элементов, возвращаемых селектором $('.thumbs li a').

$(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') получает все дивы внутри всех якорей.
• $(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'}); 
      }); 
});