除了第一行（標題），HTML表格突出顯示行懸停

我有一個呈現給HTML表的ASP.NET GridView。

<table> 
    <tr><th>Col 1 Head</th><th>Col 2 Head</th></tr> 
    <tr><td>Data 1</td><td>Data 2</td></tr> 
    <tr><td>Data 3</td><td>Data 4</td></tr> 
</table>

我想強調的行，當鼠標懸停在它 - 除了第一行是標題。

我只是用JQuery弄溼了我的腦袋，並且用CSS（CSS2或CSS3）涉足了一下。有沒有一種首選的方法來做到這一點？

任何人都可以爲我提供一個起點嗎？

乾杯

Andez

來源

2012-08-09 Andez

您可以使用CSS :hover符做到這一點。這裏有一個演示：

<table> 
    <tr><th>Col 1 Head</th><th>Col 2 Head</th></tr> 
    <tr class = "notfirst"><td>Data 1</td><td>Data 2</td></tr> 
    <tr class = "notfirst"><td>Data 3</td><td>Data 4</td></tr> 
</table>

CSS：

.notfirst:hover { 
    background-color: red; 
}

來源

2012-08-09 10:03:49 Chris

是啊，我想這一點 - CSS類每行除了第一個。希望有一些先進的CSS來做到這一點。歡呼 – Andez 2012-08-10 10:48:24

@Andez實際上，有一種方法可以在不爲每一行指定類的情況下完成。請看看我的新答案。 – Chris 2012-08-10 13:01:57

-1，你應該指定行* *不會影響懸停，而不是指定* n *行數。 – 2014-05-29 02:57:28

使用jQuery類添加到TD的父元素（不會選擇日）

$('td').hover(function(){ 
    $(this).parent().addClass('highlight'); 
}, function() { 
    $(this).parent().removeClass('highlight'); 
});

然後添加CSS類

.highlight { 
    background:red; 
}

來源

2012-08-09 10:04:42

這是矯枉過正，恕我直言。 – Chris 2012-08-09 10:06:00

從這個問題看來，他似乎想學習一點jQuery，這就是爲什麼我使用它，個人我不會downvote一個答案，即使你看到它過度殺傷，但嘿什麼漂浮你的船，提高某人的知識。 – 2012-08-09 10:09:53

我同意這對學習更多關於** jQuery **很有幫助。 – Chris 2012-08-09 10:14:22

有一種方法可以實現e期望的行爲，而不需要單獨分類每行。下面是如何使用CSS :not和:first-child選擇突出除了懸停第一個（頭）每個錶行：

tr:not(:first-child):hover { 
    background-color: red; 
}

不幸的是，IE < 9不支持:not，所以在一個跨瀏覽器做到這一點這樣，您就可以使用這樣的事情：

tr:hover { 
    background-color: red; 
} 
tr:first-child:hover { 
    background-color: white; 
}

基本上，第一CSS規則包括所有行。爲避免突出顯示第一行，您可以通過選擇tr:first-child，然後將其background-color保持爲白色（或任何未突出顯示的行的顏色）來覆蓋其懸停樣式。

我希望也有幫助！

來源

2012-08-10 13:06:50 Chris

謝謝，我也喜歡這個解決方案。 +1 – Andez 2012-08-15 08:32:58

記住，這是行不通的，其中標記爲'

......酒吧 ...

富

'。如果這是您的標記使用 - 更簡單 - 「tbody tr：hover」選擇器。 – koniu 2015-03-23 08:39:04

這應該是明顯的答案。 – BritishSteel 2016-01-25 15:16:06

使用TH標籤的第一行，並做到這一點：

th { 
background-color:#fff;

}

對於所有其他行：

tr:not(:first-child):hover { 
    background-color:#eee; 
}

或

tr:hover td { 
    background-color:#eee; 
}

來源

2013-04-30 19:45:04 phsaires

1.將頁眉TR在thea裏面d標籤

2.將TBODY標籤內的其他TR

3.使用下面的CSS

table tr:not(thead):hover { 
    background-color: #B0E2FF; 
}

來源

2013-06-06 09:46:21 user2458978

這對我來說是這樣的：'table tbody tr：hover {background-color：＃B0E2FF; }' – egallardo 2013-08-23 03:33:10

'：not（thead）'就像jQuery選擇器一樣好，但鉻和firefox都沒有太多印象。 'table tbody tr：hover'工作得很好，但是 - 很好的評論。 – koniu 2015-03-23 08:31:20

要在user2458978的回答肯定擴大這樣做的最好的辦法是正確的代碼了表。

<table> 
<thead> 
    <tr><th></th></tr> 
</thead> 
<tbody> 
    <tr><td></td></tr> 
    <tr><td></td></tr> 
</tbody> 
</table>

那麼CSS簡直是

table tbody tr:hover { background-color: red; }

Here's a jsFiddle example

來源

2013-08-13 13:17:32 Morvael

如何通過使用類名來完成它？我添加了類名-http：//jsfiddle.net/bzamfir/2c2jU/ - 但現在突出顯示不再有效。感謝您的幫助 – bzamfir 2014-02-28 22:10:49

對不起 - 現在可能已經太晚了。您的Fiddle示例中的CSS稍微關閉，.hover table tbody tr：hover {background-color：red; }應該只是.hover tbody tr：hover {background-color：red; }因爲表格不是類的子元素.hover – Morvael 2014-03-11 11:28:51

這應該是正確的答案。 – swdon 2016-08-25 17:37:25

爲什麼不一樣的東西：

tr:first-child ~ tr { background-color:#fff; }

來源

2014-01-08 18:10:19 user3174546

由於我的要求，我必須強調，除了所有的偶數行標題行。

因此，這個答案可能不適合上述問題。

即使如此，我在這裏給出我的答案，希望別人可以使用我的答案，如果他們在搜索引擎搜索中遇到此頁面。

我的回答是：

$("#tableName tr:even").not("tr:nth(0)").addClass("highlight");

來源

2014-12-31 09:20:20

除了第一行（標題），HTML表格突出顯示行懸停

回答

相關問題