使用javascript更改样式背景时，原始a：hover停止工作

Question

我有这个HTML：

#navcontainer ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
}

#navcontainer li { margin: 0 0 .2em 0; }

#navcontainer a {
    padding-left: 4px; 
    font: bold 13px Verdana;
    display: block;
    color: #FFF;
    background-color: #036;
    width:35em;
    #padding: .2em .8em;
    text-decoration: none;
}

#navcontainer a:hover {
    background-color: #369;
    color: #FFF;
}
....
....
....
var po =null;
function loadNewVideo(id, startSeconds,o) { 
  c(o.id,"#FF3030");
  if(po!=null)
  {
    c(po.id,"#036");
  }
  po = o;
}

function c(id,c) {  
    document.getElementById(id).style.background = c;
}

.... 
....
....

<div id="navcontainer">
<ul>
<li><a href="javascript:void(0);" onclick="loadNewVideo('xxxx1','0');" id="l_0">Blah 1</a></li>
<li><a href="javascript:void(0);" onclick="loadNewVideo('xxxxx3','0');" id="l_1">Blah 1</a></li>
<li><a href="javascript:void(0);" onclick="loadNewVideo('xxxxx4','0');" id="l_2">TBlah 2</a></li>
<li><a href="javascript:void(0);" onclick="loadNewVideo('xxxxx5','0');" id="l_3">Blah 3</a></li>
</ul> 
</div>

现在当我没有点击链接时，a：hover工作正常;但是在我单击其中一个链接后，a：悬停在单击的链接中停止工作。为什么呢？

Answer 1

使用！important

如果您希望:hover覆盖内联样式，请使用!important。

#navcontainer a:hover {
   background-color: #369 !important;
   color: #FFF;
}

虽然在IE的某些版本中不起作用。

---

使用班级

另一种选择是应用类而不是使用内联样式。但是您需要确保该类位于CSS中的:hover定义之前。

#navcontainer a.clicked {
    background-color: #FF3030
}

#navcontainer a:hover {
   background-color: #369;
   color: #FFF;
}

JS

function loadNewVideo(id, startSeconds, o) {
    c(o.id, "clicked");
    if (po != null) {
        c(po.id, "#036");
    }
    po = o;

}

function c(id, c) {
    var el = document.getElementById(id);
    if( (" " + el.className + " ").indexOf(" " + c + " ") === -1 ) {
        el.className += " " + c;
    }
}

---

旁注

你在内联处理程序中缺少一个参数：

                       <!-- need to pass this as the third argument -->
<li><a href="javascript:void(0);" onclick="loadNewVideo('xxxx1','0', this);" id="l_0">Blah 1</a></li>

你真的不需要传递id，然后在getElementById函数中使用c。只需传递元素本身：

c(o, "clicked");

...并直接使用它：

function c( el, c ) {
    if( (" " + el.className + " ").indexOf(" " + c + " ") === -1 ) {
        el.className += " " + c;
    }
}

---

两种方法的JSFIDDLE DEMOS

• First approach

• Second approach