奇怪：当使用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