奇妙な：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などがあります。この「バグ」はChromeとOperaに存在し、IEとFirefoxでは目的の動作が得られます。 上記の最初の画像として強調表示された行をCSSを使用して取得するにはどうすればよいですか？

Answer 1

だけ変更あなたのCSSに定義されている、あなたは簡単にご希望のホバー効果を達成する:hover効果。

CSS：

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

は、ここで私は物事の多くを試みたが、解決策はとても簡単だったJSFiddle