Question

我想为我的桌子排做悬停舞台。如果将鼠标悬停在行上而不是背景颜色应该更改。

我的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 th{border:solid 1px #ccc;}

Answer 1

我发现这有效：

#order-table tr:hover:nth-child(odd)
{
    background: blue;
}

Answer 2

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

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

像这里：http://jsfiddle.net/dwkEk/

Answer 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:hover{background:#600000;}

你也可以试试......

.tabuler_data tr:hover td{background:#600000;}

Answer 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。但它可能不适用于旧版本的浏览器。

Answer 5

tr:hover { background: #aaa; }

如何为奇数和偶数表行创建悬停阶段

5 个答案: