Question

我有一些JavaScript正在正确地更改图像但是一旦调用它，我的a：hover CSS代码就不再有用了。

使用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并且没有使用element.style规则覆盖的a：hover代码？

Answer 1

据我所知设置element.style.backgroundImage与使用内联样式基本相同。

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

不幸的是，内联样式总是获胜。在上面的示例中，链接将始终为红色。正如Daniel White所说，jQuery在这里非常有用。虽然您可以通过两种方式解决这个问题。

一，使用javascript生成样式来编写样式标记

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

或两个，手动设置mouseenter / mouseleave事件来处理悬停样式

<强>更新

或者三，正如KevinUK所指出的那样，使用！important 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风格差距感到沮丧，所以我建立了 使用CSS字符串从js应用样式的方法

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

用javascript覆盖css会覆盖悬停链接样式吗？

2 个答案: