Javascript 如何在单个div上停止所有div的jquery更改css

我有以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> 

$（'.student box'）。悬停（函数（）{
$（'.student info'）.css（'opacity'，'0.8'）；
$（'.student info'）.css（'margin-top'，'-20px'）；
$（'.student info'）.css（'height'，'130%'）；
$（'.onhover ul'）.show（）；
},
函数（）{
$（'.student info'）.css（'opacity'，'0.7'）；
$（'.student info'）.css（'margin-top'，'75px'）；
$（'.student info'）.css（'height'，'63%'）；
$（'.onhover ul'）.hide（）；
});

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

试试这个：

$('.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
   })
);

$('.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（）

方法并不重要，在回调中，您仍然只是说“使用类选择所有元素…”

在回调函数中，

这是实际触发事件的DOM元素。因此，您可以将其包装在jQuery中并对其调用方法

虽然不建议以这种方式使用
css（）
方法，但您最好添加一个类名并将样式移动到样式表中，否则您的行为中会有演示文稿。
但是学生框和学生信息实际上是两个不同的类
$（此）
是一个jQuery对象，包含悬停的DOM元素
这
是DOM元素。我的样式表中有这些类，还有其他属性。但是要创建悬停效果，我想我需要使用jquery，rite？