javascript - 如何在悬停单个 div 时停止 jquery 更改所有 div 的 css

Question

我在 div 中显示了信息 block 。我想在悬停时更改特定 div 的 css。但是目前，当我将鼠标悬停在任何 div 上时，所有 div 的 css 都会发生变化。

这是我的 jquery 代码:-

<script>
        $('.student-box').hover( function(){
            $('.student-info').css('opacity', '0.8');
            $('.student-info').css('margin-top', '-20px');
            $('.student-info').css('height', '130%');
            $('.onhover-ul').show();
        },
        function(){
            $('.student-info').css('opacity', '0.7');
            $('.student-info').css('margin-top', '75px');
            $('.student-info').css('height', '63%');
            $('.onhover-ul').hide();
        });
    </script> 

如何更改 jquery，以便只有悬停在其上的 div 受到影响。可以有很多学生，这意味着会生成很多“学生框”。

Answer 1

$('.student-box').hover( function(){       
       // $(this) is DOM element what hovered at this moment

       $(this).find('.student-info').css({
          'opacity': '0.8',
          'margin-top', '-20px',
          'height', '130%'
       });
   },
   function(){
         // unhover code like hover
   })
);