Applying css with javascript overrides hover link style?

Question

I have some JavaScript which is changing an image correctly but once it has been called, my a:hover CSS code no longer works.

Looking with firebug the following JavaScript creates this css rule:

element.style {
background-image:url(/content/images/side_partnershipsOver.png);
}

document.getElementById('partnerships').style.backgroundImage = "url(/content/images/side_partnershipsOver.png)";

How can I apply the JavaScript and not have the a:hover code overriden by the element.style rule?

Answer 1

As far as I know setting the element.style.backgroundImage is essentially the same as using an inline style.

<style type="text/css">
  a { background: blue; }
  a:hover { background:green; }
</style>
<a href="#" style="background:red;">link<a>

Unfortunately the inline style always wins. In the above sample the link will always be red. As Daniel White said jQuery would be very useful here. Although you may be able to get around this issue in two ways.

One, Generate the style using javascript to write a style tag

document.write("<style type='text/css'>#partnerships { background-image:url(/content/images/side_partnershipsOver.png);}</style>");

or two, Manually setup mouseenter/mouseleave events to handle your hover style

Update

or three, as pointed out by KevinUK, use the !important css tag to override the inline style set.

<style type="text/css">
  a { background: blue; }
  a:hover { background:green !important; }
</style>
<a href="#" style="background:red;">link<a>

Answer 2

I was also frustrated about this CSS js style gap so I build
methods to apply style from js with a CSS string

elm.jCSS(cssText);elm.jCSSPseudo(cssText,pseudoElt)