Question

Here是小提琴。我正在尝试使用<div>创建自己的复选框，并使用$().css()应用颜色。当您点击div时，我尝试在点击功能中使用$().toggleClass()将背景颜色更改为#96f226

jQuery的：

$('div').mouseenter(function(){
    $(this).css('background','#656565');
});
$('div').mouseleave(function(){
    $(this).css('background','#4a4a4a');
});
$('div').click(function(){
    $(this).toggleClass('active');
});

HTML：

<div></div>

CSS：

div {
    width: 15px;
    height: 15px;
    background: #4a4a4a;
    cursor: pointer;
}
.active {
    background: #96f226
}

Answer 1

通过.css调用'background'属性，您可以更改指定为其属性的元素的相应内联样式。换句话说，您的mouseenter处理程序会将<div>变为<div style="background: ##656565">。 mouseleave的工作方式与此类似，只是style属性的值不同。

问题是以这种方式设置的样式规则 - 在style属性中 - 具有最高specificity，而不是由于类匹配规则（或任何选择器组合）而应用的样式规则在CSS规则集中给出。

这就是为什么在将类active添加到元素时没有看到任何更改的原因（并且很容易检查类IS是否确实添加;它只是其规则未被计算）。

如果您完全删除所有内联样式并使用其他类 - 要设置mouseenter处理程序，并删除mouseleave，那么该问题很容易解决。

但实际上，您甚至不需要：您尝试处理的事件已经由浏览器以非常好的方式处理。这很容易利用：只需设置:hover伪类的样式规则，如下所示：

div:hover {
    background: #656565
}
div.active, div.active:hover {
    background: #96f226
}

这是一个Fiddle来玩。

Answer 2

这是因为class的优先顺序低于style属性。

Answer 3

直接在元素上设置CSS属性时，优先于切换的类。为了使它工作，你必须添加另一个类。

.enter {
   background: #656565;
}

然后你的JS会是这样的：

$('div').mouseenter(function(){
   $(this).addClass("enter");
});
$('div').mouseleave(function(){
   $(this).removeClass("enter");
});
$('div').click(function(){
   $(this).toggleClass('active');
});

请参阅此小提琴http://jsfiddle.net/w8yuZ/5/

Answer 4

试试这个：

$(function(){

    $('div').mouseenter(function(){
        $(this).css('background','#656565');
    });

    $('div').mouseleave(function(){
        $(this).css('background','#4a4a4a');
    });

    $('div').click(function(){
        $(this).toggleClass('active');
    });

});

Answer 5

这将对您有所帮助：

.active {
    background: #96f226 !important;
}

$（）toggleClass（）;不工作

5 个答案: