如何阻止jquery更改一个div的所有div的css

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(){ 
    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(); 
}); 

不要紧，你叫hover()方法上的一个div，你仍然只是说“选择与类的所有元素的回调里面.. '

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

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

Answer 2

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