應用與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覆蓋懸停鏈接樣式？

回答

相關問題