Setting background color with JavaScript breaks the CSS hover behavior

Question

I\'m trying to create a menu where the currently selected (clicked) element has a different background color than the other elements (I\'m trying to achieve this using JavaS

Answer 1

you need to use !important on hover, basically it will increase its priority.

Try this,

p#links a:hover {
    background-color: #f00 !important;
}

DEMO

---

As Quentin said it looks like a dirty one, so in that situation we can make use of the class priority concepts.

HTML:

Link 1
Link 1

CSS:

.normal { background-color: blue; } 
.abnormal{ background-color: yellow; }

.normal:hover { background-color: #f00; }

JS:

$('p#links a').attr('class', 'abnormal normal');

DEMO Non-Dirty one