如何为奇数和偶数表行制作悬停阶段

Posted 2023-05-08

【中文标题】如何为奇数和偶数表行制作悬停阶段

【英文标题】：How can I make hover stage for odd and even table row

【发布时间】：2011-07-28 22:06:36

【问题描述】：

我想为我的表格行制作悬停阶段。如果将鼠标悬停在行上，则应该更改背景颜色。

我的 CSS 是这样的：

.tabuler_data border-collapse:collapse;
.tabuler_data td border:solid 1px #ccc;
.tabuler_data tr:nth-child(even) td, tbody tr.even td background:#fff;
.tabuler_data tr:nth-child(odd) td, tbody tr.odd td background:#f5f5f5;
.tabuler_data thead background:#666;font:bold 12px Arial, Helvetica, sans-serif;color:#fff;text-align:center;
.tabuler_data thborder:solid 1px #ccc;

【问题讨论】：

我不想使用 javascript。没有js这可能吗？我正在使用 tr:nth-child(even) 和 (odd) 所以直接 tr:hover 不起作用。

【参考方案1】：

我发现这行得通：

#order-table tr:hover:nth-child(odd)

    background: blue;

【参考方案2】：

您的问题可能是偶数/奇数选择器的特异性与 :hover 选择器相同。如果您将鼠标悬停在正常样式之上，它将被覆盖。尝试这样做：

.tabuler_data tr:nth-child(odd):hover td, tbody tr.odd:hover td background:#f00;

喜欢这里：http://jsfiddle.net/dwkEk/

【参考方案3】：

<tr class="odd"><td></td></tr>
<tr class="even"><td></td></tr>
<tr class="odd"><td></td></tr>
<tr class="even"><td></td></tr>
<tr class="odd"><td></td></tr>
<tr class="even"><td></td></tr>
<tr class="odd"><td></td></tr>
<tr class="even"><td></td></tr>
...

悬停

.tabuler_data tr:hoverbackground:#600000;

你也可以试试……

.tabuler_data tr:hover tdbackground:#600000;

【讨论】：

啊，太可怕了。检查 OP 的问题，它显示了如何使用 :nth-child([odd|even]) 来避免这样的疯狂

@david 你是说他不知道如何使用 :hover 吗？我知道 CSS 选择器。

@webarto .tabuler_data tr:hoverbackground:#60000; 不起作用。我试过了。 :(

少了一个零，应该是#600000而不是#60000，请重试。

@webarto 不，我没有说任何类似的话：S 我是说在每个 tr 上放置一个“奇数”/“偶数”类并不是一个好方法。

【参考方案4】：

也许这个链接会对你有所帮助，

http://juicystudio.com/cognitive/example16.htm

http://www.w3.org/Style/CSS/Test/CSS3/Selectors/20011105/html/interactive/flat/css3-modsel-18.html

但我从来没有用过，我通常用javascript，用jquery很容易完成，

 $('table tr').hover(function ()
     $(this).css('background', 'red'), 
                     function () 
      $(this).removeAttr('style');)

开启jsfiddle。

没有 javascript here。但它可能不适用于旧版本的浏览器。

【讨论】：

我不想使用 javascript。没有js这可能吗？

@kcrajput 似乎jsfiddle.net/zBcAr 可以在最新的 chrome 和 firefox 3.6 上工作

【参考方案5】：

tr:hover  background: #aaa;