显示隐藏的 CSS 类 [关闭]答案

【问题标题】：Display hidden css classes [closed]显示隐藏的 CSS 类 [关闭]
【发布时间】：2013-09-22 13:04:55
【问题描述】：

如何在悬停时显示隐藏的 CSS 类

<a class="a1">Show the first</a>
<a class="a2">Show the second</a>

<div class="div1">The first</div>
<div class="div2">The second</div>

我觉得很清楚

谢谢！

【问题讨论】：

标签： css

【解决方案1】：

只有 CSS 的选项是有 2 个类，其中一个隐藏 div 元素，其他元素则使用伪选择器 :hover 显示它

div {
    display: none;
}

a:hover + div {
    display: block;
}

【讨论】：

我相信你已经理解了这个问题。您应该只提到这个解决方案需要更改html，它应该是a + div，然后是a + div（不是a + a then div + div）。
@bfavaretto 我不想更改 html
@Mite Mitresk 仅当我更改了 html 但我不想这样做时才有效
@Ahmed 添加了一个答案，有一个类似的选择器可以完成这项工作。

【解决方案2】：

您可以使用general sibling selector:

div { display: none; }
.a1:hover ~ .div1 { display: block; }
.a2:hover ~ .div2 { display: block; }

【讨论】：