应用与javascript的CSS覆盖悬停链接样式？

我有一些正在改变图像的JavaScript，但一旦它被调用，我的a：悬停CSS代码不再起作用。应用与javascript的CSS覆盖悬停链接样式？

与萤火虫寻找以下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规则重写？

来源

2009-05-05 KevinUK

哪里是你的CSS设置了一个：悬停风格？请发布更多代码。 – roryf 2009-05-05 16:03:51

需要看到更多的代码。但是你确定你的HTML仍然像转换之后那样？我假设你在线编写你的样式。我可以建议让他们正确地写在引用的CSS文件 – nickmorss 2009-05-05 16:12:11

为什么你不使用CSS呢？另外，你可以发布你的JavaScript？ – 2009-05-05 16:00:25

据我所知设置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 /鼠标离开事件处理您悬停风格

更新

或三个生成风格正如KevinUK指出的那样，使用！important.css标签来覆盖内联样式集。

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

来源

2009-05-05 16:04:33 bendewey

啊哈！既然你说element.style与我刚刚添加的内联样式相同！对我的a：hover来说很重要，并且它停止了element.style，覆盖了我的a：hover规则。是的，JavaScript是凌乱的而不是CSS，但我使用了一个花哨的Javascript菜单脚本，因此强制关闭了该路线。 – KevinUK 2009-05-05 16:11:08

很好，我补充说＃3，尽管它可能应该是＃1，因为它的恕我直言，最干净的方法。 – bendewey 2009-05-05 16:14:30

我也沮丧这个CSS爵士风格的差距，所以我建立
方法从JS应用样式与CSS串

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

来源

2011-11-09 16:59:19 bortunac

应用与javascript的CSS覆盖悬停链接样式？

回答

相关问题