奇怪：當使用rowspan時懸停行爲

Question

我有一個使用rowspan的表，我想在鼠標懸停時突出顯示每一行。所以，基本的css，table tr:hover {background-color: yellow;}，但我從它得到一些奇怪的行爲：當鼠標越過行，它可能隨機突出顯示整行或一部分。但對我來說真正的問題是，即使鼠標不在時，行的某個部分仍然會突出顯示。特別是，使用colspan和rowspan使用jquery更改表格的佈局，使該行的一部分保持突出顯示。 這是CSS問題的圖像：

你可以看看我在這個fiddle

$('.top').click(function(){ 
 
var th = $(this); 
 
th.find('td').eq(0).attr('rowspan','1'); 
 
th.next('.bottom').find('td').attr('colspan','2'); 
 

 
})

table td { 
 
\t border: 1px solid black; 
 
\t 
 
} 
 
.top:hover { 
 
\t background-color: yellow; 
 
} 
 
#hidden { 
 
\t border: 0; 
 
} 
 
#hidden div { 
 
\t display: none; 
 
} 
 
p { 
 
\t height: 600px; 
 
\t display: block; 
 
}

<table> 
 
<tr class="top"><td rowspan="2">Rowspan #1</td><td>Top text here</td><td rowspan="2">Another rowspan</td></tr> 
 
<tr class="bottom"><td><div> 
 
Bottom-text: here 
 
</div></td></tr> 
 
<tr class="top"><td rowspan="2">Rowspan #2</td><td>Top text here</td><td rowspan="2">Another rowspan</td></tr> 
 
<tr class="bottom"><td><div> 
 
Bottom-text: here 
 
</div></td></tr> 
 
<tr class="top"><td rowspan="2">Rowspan #3</td><td>Top text here</td><td rowspan="2">Another rowspan</td></tr> 
 
<tr class="bottom"><td><div> 
 
Bottom-text: here 
 
</div></td></tr> 
 
<tr class="top"><td rowspan="2">Rowspan #4</td><td>Top text here</td><td rowspan="2">Another rowspan</td></tr> 
 
<tr class="bottom"><td><div> 
 
Bottom-text: here 
 
</div></td></tr> 
 
</table> 
 

 
<p> 
 

 
</p>

談論我實際使用IE瀏覽器進行了測試，Chrome，Opera和Firefox。這個「bug」出現在Chrome和Opera上，而在IE和Firefox中，我得到了期望的行爲。 我怎樣才能得到突出顯示爲上面的第一個圖像使用只是CSS？

Answer 1

就在變化，你已經在你的CSS定義，你會很容易達到你想要的懸停效果的:hover效果。

CSS：

.top:hover * { 
    background-color: yellow; 
} 

這裏的JSFiddle