Question

Here is my css:

.parentDiv {
}

.childDiv {
    height:40px;
    width:165px;
    color:#D6D6D6;
    text-align:left;
    cursor:pointer;
    font-size:.85em;
    font-weight:normal;
    border-top:1px solid #0F0F0F;
}

.childDiv:hover{
    background:#2B2B2B;
}

这是我的jquery：

<script type="text/javascript">

    $('.childDiv').click(function(){
        $(this)
            .css('background-color','#4F94CD')
            .siblings()
            .css('background-color','black');
    });

</script>

class childDiv的div悬停效果完美无缺。但是，一旦我运行上面的jquery函数，CSS悬停效果似乎不再起作用。在运行此jquery函数后，我仍然可以使用悬停效果，我试图寻找一个jquery替换悬停效果，但没有一个完美地工作。如果有人知道如何解决这个问题，非常感谢帮助，谢谢！

Answer 1

听起来不很奇怪...尝试在悬停背景上设置！important，如下所示：

.childDiv:hover {
  background: #2b2b2b !important;
}

Answer 2

jQuery直接将CSS添加到元素中，并且通过CSS规则，最具体的CSS占据了先例。直接应用的CSS比样式表应用的CSS更具体。

要解决此问题，请首先使用相同的CSS（background-color而不是background）应用颜色，然后添加!important以告诉浏览器您希望该样式覆盖任何其它：

.childDiv:hover {
    background-color: #2b2b2b !important;
}

background:在技术上有效，但在定义所有背景属性时用作快捷方式。也许你是，但在这里我只是为了确保我们没有得到任何奇怪的优先规则。

演示：http://jsfiddle.net/mYwh2/

Answer 3

这是因为jquery通过添加一个覆盖任何css的内联样式属性来应用样式。

你最好的解决方案是添加类而不是设置css porperties - 这将允许css：hover仍然起作用。

试试这个：

.parentDiv{
}
.childDiv{
background-color: #000;
height:40px
width:165px;
color:#D6D6D6;
text-align:left;
cursor:pointer;
font-size:.85em;
font-weight:normal;
border-top:1px solid #0F0F0F;
}
.childDiv:hover{
background:#2B2B2B;
}
.selected{
background-color: #4F94CD;
}

用这个jquery：

<script type="text/javascript">
$(function(){
    $('.childDiv').click(function(){
        $(this).toggleClass('selected');
    });
});

运行jquery函数后，CSS悬停效果不起作用

3 个答案: