Jquery 获取和设置选择器的特定范围

Question

事实:

<div class="item">
</div>

<div class="item">
</div>

<div class="item">
</div>

<div class="item">
</div>

$(".item").eq(1).css("background-color","red");
$(".item").eq(2).css("background-color","red");

我想做一些类似的事情，当我将鼠标悬停在颜色为“红色”的元素上时，它会变成黑色，但其他元素将保持不变。

$(".item).mouseover(function(){
   var cur_css = $(this).css("background-color");
   ???? //Now what?
});

请帮忙？

Answer 1

更好的解决方案是将 css 样式与 javaScript 代码分开。您只需在一个元素上添加或删除类名，样式就会保留在样式表中。

解决方案是 here

你的CSS

.red {
    background-color:red;
}

.black {
    background-color:black;
}

你JS:

$(".item").eq(1).addClass('red');
$(".item").eq(2).addClass('red');

$(".item").mouseover(function() {
    $(this)
        .parent()
            .find('.red')
            .removeClass('red')
            .addClass('black');
}).mouseout(function() {
    $(this)
        .parent()
            .find('.black')
            .removeClass('black')
            .addClass('red');
});