當鄰接的兄弟元素被佔用時顯示元素

Question

這是我的代碼。

<tr id="optShow"> 
<td><strong>Optimized for</strong></td> 
<td style="text-align:center;">500K visitors /mo</td> 
<td style="text-align:center;">100K visitors /mo</td> 
<td style="text-align:center;">10K visitors /mo</td> 
<td style="text-align:center;">5K visitors /mo</td> 
</tr> 
<tr id="optHidden"> //this one is hidden with css 
<td>&nbsp;</td> 
<td colspan="4" style="text-align:center;">This is not a limit. This is just a way for you to decide which plan is best for you. If you know your monthly view count this makes it easy. Remember, you can always start at Small and upgrade as you grow.</td> 
</tr> 

我的目標是當用戶將鼠標懸停在#optShow tr上時，會顯示#optHidden。這也會發生在頁面上的不同trs上。

我想用CSS來做，但我無法弄清楚。

如果必須我可以做JQ。

感謝您的幫助

Answer 1

使用相鄰的兄弟選擇：

http://www.w3.org/TR/selectors/

#optHidden {display: none} 
#optShow:hover + #optHidden {display: table-row} 

這將選擇徘徊#optShow元素之後會直接接觸#optHidden元素。

基於JK的評論......顯示懸停任何<tr>的相鄰兄弟：

<tr class="row-hover"><td>Hover to show the next row</td></tr> 
<tr class="row-hide"><td>I'm the next row</td></tr> 

.row-hide {display:none} 
.row-hover:hover + .row-hide {display: table-row}