Question

我有一个侧边栏菜单，并且使用js代码活动项目具有不同的背景和字体颜色。它有效，但点击任何项目后，标记为line x的css行 - 没有更多工作。为什么会丢失。在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：

当使用.css（）作为setter时，jQuery会修改元素的样式属性。

您的代码会产生：

<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()甚至jQuery的toggleClass()函数。

生活演示：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;
}

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

1 个答案: