html - 默认情况下隐藏的元素 - 使用 CSS 在悬停时显示

Question

我有一个默认情况下隐藏的 DIV 元素。但是在悬停时，我希望它可见。

这是我当前的 CSS:

.main-menu .left-footer{
    display: none;
}

.main-menu:hover + .left-footer {
   display: block !important;
}

和 HTML:

<div class="left-footer">
                <small>
                <a href="/support">Support</a> <a href="/terms">Terms of Service</a> <a href="/privacy">Privacy</a> <br />
                &copy; 2015 LittleBux. All Rights Reserved
                </small>
              </div>

我在这里做错了什么？

我正在以 this topic 为例

Answer 1

他们使用了相互冲突的选择器。首先，.left-footer 是 .main-menu 的子项。在第二个示例中，它是 sibling 。

因为你还没有用 .main-menu 发布代码，我不确定它与 .left-footer 的关系，但你需要使两个规则一致。