Question

I have this 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>

Now when I haven’t clicked a link, the a:hover is working fine; but after I click one of the links, the a:hover in the clicked link stops working. Why?

Answer 1

Using !important

If you want the :hover to override your inline styling, use !important.

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

Won’t work in some versions of IE though.

---

Using a class

Another option would be to apply a class instead of using inline styles. But you’d need to make sure the class is located before the :hover definition in your CSS.

#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;
    }
}

---

Side note

You’re missing an argument in your inline handlers:

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

And you really don’t need to pass its id, and then use getElementById in the c function. Just pass the element itself:

c(o, "clicked");

…and use it directly:

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

---

JSFIDDLE DEMOS of both approaches

• First approach

• Second approach