Applying css with javascript overrides hover link style? -
I have some javascript that is changing an image correctly but once it's called, one of my: Hover CSS code no longer works.
The following javascript in this search for firebug creates this CSS rule:
element.style {background-image: url (/content/images/side_partnershipsOver.png); } Document.getElementById ('Partnership'). Style.backgroundImage = "url (/content/images/side_partnershipsOver.png)"; How do I implement JavaScript and I do not have: Override the hover code from the element.style rule?
As far as I have been set to element.style.background, image is basically identical to using an inline style is.
& lt; Style type = "text / css" & gt; A {background: blue; } A: hover {background: green; } & Lt; / Style & gt; & Lt; A href = "#" style = "background: red;" & Gt; Link & lt; A & gt; Unfortunately the inline style always wins. The link in the above sample will always be red, as Daniel White has said that jQuery would be very useful here. However, you can get this problem in two ways.
One, to create a style tag, generate style using javascript
document.write ("& lt; style type = 'text / css' & gt; ; #partnership {background-image: url (/content/images/side_partnershipsOver.png);} "); Update or three, As told by KevinYuk Use the important CSS tag to override the inline style set.
& lt; Style type = "text / css" & gt; A {background: blue; } A: Hover {background: green! Important; } & Lt; / Style & gt; & Lt; A href = "#" style = "background: red;" & Gt; Link & lt; A & gt;
Comments
Post a Comment