jquery - 执行js代码后css悬停状态不起作用

Question

我有一个侧边栏菜单，并且使用js代码事件元素有不同的背景和字体颜色。它可以工作，但是单击任何项​​目后，CSS 行标记为 line x - 不再起作用。为什么会丢失。在js代码中我根本没有触及 :hover 状态？

<div id="divL">
<div id="sky">SKY</div>
<div id="sea">SEA</div>
<div id="universe">UNI-VERSE</div>
</div>  

CSS

#divL  div{
    margin:3px 0;
    padding:5px 14px;
    cursor:pointer;
}
#divL div:first-of-type {
  background:#ffffff;
    color:#008080;
}
#divL div:hover{  // line x
    background:#ffffff;
    color:#008080;
}

JS

$("#divL div").click(function () {
$('#divL div').css({'background':'#008080', 'color':'#ffffff'})
$(this).css({'background':'#ffffff', 'color':'#008080'})
});

Answer 1

您的 jQuery 代码正在更改内联样式，并且会覆盖您的 CSS 文件样式。

正如所指出的 in the documentation :

When using .css() as a setter, jQuery modifies the element's style property.

您的代码结果:

<div id="universe" style="background-color: #fff; color: rgb(0, 128, 128); background-position: initial initial; background-repeat: initial initial;">UNI-VERSE</div>

我建议您使用其他样式，而不是使用 jQuery 更改内联样式。您可以使用addClass() , removeClass()甚至是toggleClass() jQuery 的函数。

现场演示:http://jsfiddle.net/uUDeS/1/

jQuery:

$("#divL div").click(function () {
    $(this).siblings().removeClass('active').addClass('inactive');
    $(this).addClass('active')
});

CSS:

#divL div.inactive {
    background:#008080;
    color:#fff;
}
#divL div.active {
    background:#fff;
    color:#008080;
}