Применение CSS с помощью Javascript переопределяет стиль наведения ссылки?

Question

У меня есть некоторый JavaScript, который корректно меняет изображение, но после его вызова мой код CSS a: hover больше не работает.

Глядя на firebug, следующий JavaScript создает это правило css:

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

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

Как я могу применить JavaScript и не иметь код a: hover, переопределенный правилом element.style?

Answer 1

Насколько я знаю, установка element.style.backgroundImage по сути такая же, как и при использовании встроенного стиля.

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

К сожалению, встроенный стиль всегда побеждает. В приведенном выше примере ссылка всегда будет красной. Как сказал Дэниел Уайт, jQuery будет очень полезен здесь. Хотя вы можете обойти эту проблему двумя способами.

One, Генерация стиля с использованием JavaScript для написания тега стиля

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

или два, вручную установите события mouseenter / mouseleave для обработки вашего стиля наведения

Обновление

или три, как указано KevinUK, используйте тег! Важное css для переопределения встроенного набора стилей.

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

Answer 2

Я также был разочарован этим пробелом в стиле CSS js, поэтому я строю
методы применения стиля из js со строкой CSS

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