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代码分开。您只需在一个元素上添加或删除classname，样式仍保留在样式表中。

解决方案是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');
});

Answer 2

更改此

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

然后

$(".item).mouseover(function(){
   $(".item).each(function(){
       if ($(this).data('color') == 'red'){
           $(this).css("background-color", "black").data('color', 'black');
       }
   })
});

根据您的需要进行修改。

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

2 个答案: