Question

我有几个div，当我悬停时，我想为悬停的div添加一个类，但同时我想为所有未悬停的div添加另一个类，这是我的代码：

我知道这是一个简单的解决方案，我有时会忽略（或者真的很累了）

HTML：

<div class="event"></div>
<div class="event"></div>
<div class="event"></div>
<div class="event"></div>
<div class="event"></div>
<div class="event"></div>
<div class="event"></div>

jQuery的：

<script type="text/javascript"> 
$( document ).ready(function() {
$( ".event" ).hover(
function() {
    $(this).addClass("hovered");
}, function() {
    $(this).removeClass("hovered");
}
);
 });
</script>

Answer 1

我想在悬停的div中添加一个类，但同时我想要向所有未悬停的div添加另一个类

将元素保存在变量中，这样您就可以定位所有内容，而不是this

var elems = $( ".event" );

elems.hover(
    function() {
        $(this).addClass("hovered");
        elems.not(this).addClass('something_else')
    }, function() {
        $(this).removeClass("hovered");
        elems.not(this).removeClass('something_else')
    }
);

Answer 2

这里试试这个：

$('div').hover(function () { // on a hover on a div
   $('div').attr('class', 'event'); // remove the class; keep the first one
   $(this).attr('class', 'hovered event'); // update the class for the current
}

这使用jQuery API中的attr来更新和替换属性值。希望它可以帮到你。

试试这个小提琴：http://jsfiddle.net/afzaal_ahmad_zeeshan/SVRcw/

Answer 3

您必须使用.not()从整个元素集合中排除当前元素。

尝试，

<script type="text/javascript"> 
$( document ).ready(function() {

var xElements = $(".event");

$( ".event" ).hover(
function() {
    xElements.not($(this)).addClass('anotherClass');
    $(this).addClass("hovered");
}, function() {
    xElements.removeClass("hovered");
    $(".event").not($(this)).removeClass('anotherClass');
}
);
 });
</script>

Answer 4

使用not() 试试这个

 $( document ).ready(function() {
   var $event=$('.event');
   $event.hover(function() {
      $(this).addClass("hovered");
      $event.not(this).addClass("newClass");
   }, function() {
      $event.not(this).removeClass("newClass");
    });
});

jquery将类添加到div，向所有其他类添加另一个类

4 个答案: