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}

当相邻的兄弟元素悬停时显示元素

1 个答案: