鏈接與jQuery

變化的背景時失去他們的CSS背景色懸停屬性我有這樣一個菜單：鏈接與jQuery

<ul id="menu"> 
    <li><a href="#" id="test">test</a></li> 
    <li><a href="#" id="test2">test2</a></li> 
</ul>

和css：

#menu li a:link { 
background: transparent; 
} 

#menu li a:hover { 
background-color: red; 
}

在我的代碼中的一些點我需要使鏈接的背景再次透明，所以我做了一個：

$("#menu > li > a:link").css("background","transparent");

這有效，但之後，我的問題它似乎是擦拭CSS懸停的背景顏色屬性。事實上，當我將鏈接懸停時，沒有任何反應。如果我在#menu li a：hover css中添加顏色：藍色時有幫助，當我懸停時文本是藍色，但仍然沒有背景顏色。

我想出了一種用jQuery做懸停的方法，但我更喜歡用css來做，因爲在我看來，它應該是這樣。這是一個錯誤？有沒有辦法讓背景透明而不擦拭懸停CSS？

由於提前，

Nolhian

來源

2012-02-01 Nolhian

我同樣的問題，我的解決方案是做兩個單獨的類，而不是改變jQuery中的背景顏色。

a.default:hover { background-color: red; } 
a.hovered:hover { background-color: transparent; } 

$("#menu > li > a:link").removeClass("default"); 
$("#menu > li > a:link").addClass("hovered");

來源

2012-02-01 21:13:28

謝謝，我沒有想到！我使用它來取消非活動菜單鏈接的顏色併爲正確的顏色着色。我的問題是：當我做$（「＃」+ menu_id +「：link」）.addClass（「colorme」）時，懸停似乎沒有做任何事情。或 $（「＃」+ menu_id）.addClass（「colorme」）; 利用CSS： a.colorme：鏈路 { 背景色：黃 } a.colorme：懸停 { 背景：黃色; 顏色：紅色; } 它的作品，我的鏈接背景採取黃色，但是當我盤旋它需要 #menu li a：hover { background-color：gray; } 而不是colorme：懸停。 – Nolhian 2012-02-02 10:28:17

好吧，因爲#menu李a：懸停在overme：懸停類我重命名它.uncolor：懸停並添加class =「uncolor」到我的鏈接。現在它工作正常;） – Nolhian 2012-02-02 10:41:38

目標的背景顏色直接，而不是簡單的「背景」：

#menu li a:link { 
background-color: transparent; 
} 


$("#menu > li > a:link").css("background-color","transparent");

來源

2012-02-01 21:00:36

我真的很希望它的工作，但是當我把背景顏色，而不是背景它不，沒有任何反應。 – Nolhian 2012-02-02 10:59:50

你可以做「的onmouseover」 JavaScript鼠標。

來源

2012-02-01 21:01:09 Rayshawn

是的，但在不支持javascript的瀏覽器（例如某些移動設備）下無法使用。 – 2012-02-01 21:03:48

@TomasLycken：jQuery作爲一個整體不適用於不支持JavaScript的瀏覽器。 – 2012-02-01 21:06:47

@DavidThomas：我知道。但是，在JavaScript而不是CSS中實現onmouseover效果會消除更多的功能（即這些設備的懸停效果）。 – 2012-02-01 21:12:40

這只是CSS的一個副作用。：hover僞類必須在：link僞類之後聲明。更改：鏈接將重置：懸停，因此您還需要重置：懸停。爲了避免這種情況的一個辦法是將你的CSS改變顏色從初始設置成一個類：

a:link {background-color: transparent; } 
a:hover {background-color: yellow; } 
a.myClass:link {background-color: cyan; }

然後

$("#menu > li > a:link").addClass("myClass");

後來

$("#menu > li > a:link").removeClass("myClass");

來源

2012-02-01 21:12:02

不，問題在於你的CSS和它被覆蓋的事實。變化：

a:hover {background-color: yellow; }

這樣：

a:hover {background-color: yellow!important; }

然後，它會正常工作。請投票回答此問題，以便其他人可以看到它。

來源

2016-05-18 13:46:54

鏈接與jQuery

回答

相關問題