Question

Here is my code.

<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>

My goal is that when a user hovers over the #optShow tr, the #optHidden will show, and this will happen with different trs on the page as well.

I would like to do it with CSS, but I can’t figure it out.

I can do jQuery if I have to.

Answer 1

Use the adjacent sibling selector:

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

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

This selects the #optHidden element that comes directly after the hovered #optShow element.

Based on JK’s comment… to show any <tr>‘s adjacent sibling on hover:

<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}