如何停止jquery更改单个div的所有div的css onhover

Question

我在 div 中显示了信息块。我想在悬停时更改特定 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
   })
);

Answer 2

试试这个：

$('.student-box').hover( function(){
    var div = $(this);

    div.find('.student-info').css({
         opacity: '0.8'
         marginTop: '-20px',
         height: '130%'
    });
    div.find('.onhover-ul').show();
}, function(){
    var div = $(this);

    div.find('.student-info').css({
        opacity: '0.7',
        marginTop: '75px',
        height: '63%'
    });
    div.find('.onhover-ul').hide();
});

你在 div 上调用 hover() 方法并不重要，在回调中你仍然只是说'选择所有具有类的元素......'

在回调函数内部，this 是实际触发事件的 DOM 元素。所以你可以将它包装在 jQuery 中并在其上调用方法。

虽然不建议以这种方式使用css() 方法，但最好添加一个类名并将样式移动到样式表中，否则您的行为会受到影响。