使用javascript覆盖悬停链接样式应用css？

我有一些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而不让a:hover代码被element.style规则覆盖？

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

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

a{背景：蓝色；}
a:悬停{背景：绿色；}
链接

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

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

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

document.write（#partnerships{background image:url（/content/images/side#u partnershipsOver.png）；}）；

或者，手动设置mouseenter/mouseleave事件以处理悬停样式

更新

或者三个，正如KevinUK所指出的，使用！用于覆盖内联样式集的重要css标记

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

a{背景：蓝色；}
悬停{背景：绿色！重要；}
链接

我也对CSS js风格的差距感到失望，所以我构建了
使用CSS字符串应用js样式的方法

---

啊哈！既然你说element.style和我刚才添加的内联样式是一样的！对我的a:hover很重要，它会停止element.style重写我的a:hover规则。是的，JavaScript是凌乱的，而不是CSS。但是我使用了一个花哨的JavaScript菜单脚本，所以我有点被迫这样做。太好了，我把它添加为#3，虽然它可能应该是#1，因为它是最干净的方法。为什么不使用CSS呢？另外，您可以发布您的JavaScript吗？设置a:hover样式的CSS在哪里？请发布更多代码。需要查看更多代码。但是，您确定您的HTML在转换后仍然保持原样吗？我认为你的写作风格是内联的。我可以建议将它们正确地写在引用的CSS文件中吗