tr：懸停不起作用

我試圖在鼠標懸停在表格行上時突出顯示整個行的背景顏色（更改背景顏色）。我通過網絡搜索，它應該工作，但它沒有。我在Chrome上顯示它。tr：懸停不起作用

<table class="list1"> 
<tr> 
    <td>1</td><td>a</td> 
</tr> 
<tr> 
    <td>2</td><td>b</td> 
</tr> 
<tr> 
    <td>3</td><td>c</td> 
</tr> 
</table>

我的CSS：

.list1 tr:hover{ 
background-color:#fefefe; 
}

正確的CSS應該是：

.list1 tr:hover td{ 
background-color:#fefefe; 
} 

//--this css for the td keeps overriding the one i showed earlier 
.list1 td{ 
background-color:#ccc000; 
}

感謝您的反饋傢伙！

來源

2011-09-22 LC Yoong

首先我想嘗試清理您的標記 - 你沒有關閉所有的td標籤。 – kinakuta

http://jsfiddle.net/FnVhX/其工作 –

那麼，問題在於CSS。我沒有在這裏展示完整的CSS。在我的代碼中，td的css覆蓋了tr：hover的那個。我只需要在.list1 tr：hover後面追加'td'來實現效果。 –

tr:hover沒有在舊的瀏覽器

的工作，你可以使用jQuery這個

.tr-hover 
{ 
    background-color:#fefefe; 
} 

$('.list1 tr').hover(function() 
{ 
    $(this).addClass('tr-hover'); 
},function() 
{ 
    $(this).removeClass('tr-hover'); 
});

來源

2011-09-22 07:01:03 Sanooj

工作正常，我...的TR-懸停應該工作。可能它不會工作，因爲：

1）您設置的背景顏色非常淡。你不會碰巧在白色背景上使用它嗎？

2）您的td-tags沒有正確關閉。

請注意，懸停tr在舊版瀏覽器中不起作用。

來源

2011-09-22 07:01:46 JNDPNT

正確。我即將發佈相同的東西。背景顏色太淺，看不到白色的差異，並且td標籤的平衡被打破。 –

像wesley sais，你還沒有關閉你的第一個td。你打開它的兩倍..

<table class="list1"> 
<tr> 
    <td>1</td><td>a</td> 
</tr> 
<tr> 
    <td>2</td><td>b</td> 
</tr> 
<tr> 
    <td>3</td><td>c</td> 
</tr> 
</table> 

my css: 
.list1 tr:hover{ 
background-color:#fefefe; 
}

沒有所需的JavaScript，只要完成你的HTML代碼

來源

2011-09-22 07:03:14 StrongLucky

最好的辦法是使用

table.YourClass tr:hover td { 
background-color: #FEFEFE; 
}

行不完全的背景支持顏色，但單元格，使用組合：懸停和子元素將產生您需要的結果。

來源

2013-04-04 21:09:51

好的回答大衛。完成。謝謝！ –

只是爲了強調：一行中的所有單元格都會突出顯示，而不僅僅是您用鼠標指向的單元格。 – Zon

令人印象深刻的答案！ – Matth3w

您可以簡單地使用background CSS屬性如下：

tr:hover{ 
    background: #F1F1F2;  
}

Working example

來源

2013-10-02 06:22:16 Monish

您需要使用<!DOCTYPE html>爲：懸停具有比<a>標籤其他任何工作。嘗試將其添加到HTML的頂部。

來源

2014-06-13 15:34:37 Yvette

或者，最可靠的，請使用https://github.com/necolas/normalize.css –

我有同樣的問題。我發現，如果我使用像DOCTYPE：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

沒有奏效。但如果我使用：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">

它確實工作。

來源

2014-07-25 19:43:57

或使用https://github.com/necolas/normalize.css –

試試：

CSS代碼：

.list1 tr:hover td { 
    background-color:#fefefe; 
}

來源

2015-02-09 12:26:04 user3687895

也可以嘗試這個tr:hover td {color: aqua;} `

來源

2016-11-03 23:33:33 Ahmed

嘗試

.list1 tr:hover td{ 
    background-color:#fefefe; 
}

來源

2016-12-28 23:04:07 Shawn

tr：懸停不起作用

回答

相關問題