很奇怪：使用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 {
	border: 1px solid black;
	
}
.top:hover  {
	background-color: yellow;
}
#hidden {
	border: 0;
}
#hidden div {
	display: none;
}
p {
	height: 600px;
	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 上定义的@Provider public class PermissionExceptionHandler implements ExceptionMapper<PermissionException>{ @Override public Response toResponse(PermissionException ex){ //You can place whatever logic you need here return Response.status(403).entity(yourMessage).build(); } } 效果，即可轻松实现所需的悬停效果。

<强> CSS ：

:hover

这是JSFiddle