javascript - 用javascript改变样式背景时，原来的a :hover stops working

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:hover 停止工作。为什么？

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，然后在c函数中使用getElementById。只需传递元素本身:

c(o, "clicked");

...并直接使用它:

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

---

两种方法的 JSFIDDLE 演示

• First approach

• Second approach