我怎样才能让奇数和偶数的表格行的悬停阶段

我想让我的表格行的悬停阶段。如果将鼠标悬停在行上而不是背景颜色应该改变。我怎样才能让奇数和偶数的表格行的悬停阶段

我的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;}

来源

2011-04-04 Kali Charan Rajput

我不想使用JavaScript。这可能没有js。并且我直接使用tr：nth-child（偶数）和（奇数）tr：hover不起作用。 – 2011-04-04 05:16:04

<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;}

来源

2011-04-04 04:36:07

ahah太可怕了。检查OP的问题，它显示了如何使用'：nth-child（[odd | even]）'来避免这种疯狂 – david 2011-04-04 05:05:23

@david你是说他不知道如何使用：hover？我知道CSS选择器。 – 2011-04-04 05:14:01

@webarto .tabuler_data tr：hover {background：＃60000;}不起作用。我已经尝试过了。 :( – 2011-04-04 05:18:05

也许这个链接会帮助你，

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

来源

2011-04-04 04:38:00

我不想使用JavaScript。这可能没有js。 – 2011-04-04 05:14:37

@kcrajput似乎有可能http://jsfiddle.net/zBcAr/工作在最新的铬和火狐3.6 – 2011-04-04 05:28:17

我使用甚至奇数，所以它不工作 – 2011-04-04 05:29:40

tr:hover { background: #aaa; }

来源

2011-04-04 05:02:49 Ray

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

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

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

来源

2011-04-04 05:27:35 david

我觉得这工作：

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

来源

2012-10-04 18:03:25 ian

我怎样才能让奇数和偶数的表格行的悬停阶段

回答

相关问题