如何在tr中給予懸停效果當我們使用tr時：奇數

我正在使用tr：奇數選擇器給出tr>奇數顏色，我也希望tr懸停效果，它在正常tr中工作正常，但不會出現該顏色在TR：奇如何在tr中給予懸停效果當我們使用tr時：奇數

在此先感謝

2012-08-06 The AV

它已經有懸停效果和顏色的變化上取代徘徊。你想要的究竟是什麼？ – Prateek 2012-08-06 05:56:34

您可以使用!important：

tr:hover{ background:#ccc !important}

css()方法增加了一個樣式屬性的元素，在樣式屬性的屬性覆蓋其他屬性，爲了避免使用!important你可以使用一個類來代替：

$(document).ready(function(){ 
    $("tr:odd").addClass('grey') 
});

2012-08-06 05:56:49 undefined

是的，我幾乎忘記了！重要的標籤.. :-)是的它的工作現在很好。謝謝 – 2012-08-06 06:04:22

@ user1479316 - 使用'！important'應該總是被認爲是最後的手段;有比這更好的解決方案。 – Spudley 2012-08-06 06:08:26

@ user1479316歡迎您使用'！important'不推薦，或者您可以使用'addClass'代替。 – undefined 2012-08-06 06:08:41

這是因爲你正在通過腳本設置的CSS被認爲是內聯，它比外部CSS文件設置的優先級更高。

你可以這樣做來解決這個問題：

腳本

$(document).ready(function(){ 
    $("tr:odd").addClass("odd") 
});

CSS

tr.odd{background-color: #eee} 
tr:hover{ background:#ccc}

記住，在CSS的順序很重要。

2012-08-06 05:57:33 Mohayemin

解決方案是不使用jQuery。

相反，您應該使用標準CSS選擇器nth-of-type來實現此目的。

然後，您可以輕鬆地用您已有的:hover選擇器覆蓋它。

tr:nth-of-type(2n) {background:#eee;} 
tr:hover{ background:#ccc}

有了這個CSS，並且在JS被移除的情況下，您現有的JSFiddle代碼完全按照您的需要工作。

您甚至可以將它們組合起來，以便奇數行獲得與偶數行不同的懸停顏色。

你唯一會遇到的問題是舊版本的IE，它不支持nth-of-type，但是有黑客可以解決這個問題。（或Selectivizr）

它沒有與jQuery版本一起工作的原因是，當jQuery設置其CSS時，瀏覽器將其視爲內嵌在HTML代碼中，因此比普通CSS代碼具有更高的優先級。

希望有所幫助。

2012-08-06 06:02:56 Spudley

是的，我在tr之前使用過：n型（2n），但它在IE8中不起作用，並且客戶端希望它能在IE8中正常工作，這是我們使用jQuery的唯一原因。 – 2012-08-06 06:09:44

你檢查過IE9.js或Selectivzr選項嗎？ – Spudley 2012-08-06 06:17:10

實際看到的第一個應用懸停事件發生什麼事，你重新分配其它CSS（其並不第二課堂）元素將與第二CSS

2012-08-06 06:14:13

回答