Показывать элемент при наведении соседнего элемента

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, но не могу понять.

Я могу сделать jQuery, если придется.

Answer 1

Используйте соседний селектор брата:

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

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

. Этот элемент выбирает элемент #optHidden, который следует непосредственно после элемента #optShow.* На основе комментария 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}