使用javascript更改样式背景时，原来的a:hover将停止工作

我有这个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>

#navcontainer ul{
保证金：0；
填充：0；
列表样式类型：无；
}
#navcontainer li{margin:0 0.2em 0；}
#导航集装箱{
左侧填充：4px；
字体：粗体13px Verdana；
显示：块；
颜色：#FFF；
背景色：#036；
宽度：35em；
#填充物：2em.8em；
文字装饰：无；
}
#导航a：悬停{
背景色：#369；
颜色：#FFF；
}
....
....
....
var-po=null；
函数loadNewVideo（id，startSeconds，o）{
c（o.id，“#FF3030”）；
如果（po！=null）
{
c（采购订单编号“#036”）；
}
po=o；
}
函数c（id，c）{
document.getElementById（id）.style.background=c；
}
.... 
....
....

现在，当我还没有点击一个链接时，a:hover运行良好；但在我单击其中一个链接后，单击链接中的a:悬停将停止工作。为什么？

使用！重要的 如果要使用

：悬停

覆盖内联样式，请使用

！重要信息

#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

---

旁注 内联处理程序中缺少一个参数：

                       <!-- 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>

…并直接使用它：

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

---

两种方法的JSFIDDLE演示

---

在您的示例中，上一个链接需要返回到其原始颜色，而不是保持红色，感谢您在FF'中的第一个选项中的回答，它没有正确操作红色仅在我将鼠标从屏幕上移开时显示link@user63898：这是一张支票。我只是忘了更改

c（po.id，#036”）至
c（采购订单，#036”）我将在一分钟内得到第二个。@user63898:不确定FF行为不正常的原因。
c(o, "clicked");

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