html - CSS 和 HTML 翻转并显示活动目标

Question

我正在尝试为没有 JS 的站点创建一个菜单，其中菜单被隐藏，在翻转时显示，并且在单击时保持打开状态。我找到了一个网站，该网站教授附加 :target 类以激活显示状态的基础知识，但是当尝试添加 :hover 效果时，它似乎覆盖了。这是 JSFIDDLE 链接：

http://jsfiddle.net/shadna/NTXbz/

这是 HTML::

<p>
  <a href="#item1">item 1</a>
  <a href="#item2">item 2</a>
  <a href="#item3">item 3</a>
  <a href="#default">clear</a>

<div class="items">
  <p id="item1">... item 1...
  <p id="item2">... item 2...
  <p id="item3">...
  <p id="default"><!-- by default, show no text -->
</div>

这是CSS::

div.items p:not(:target) {display: none}
div.items p:target {display: block}
div.items p a:hover {display: block}

谢谢！

小号

Answer 1

不幸的是，div.items p a:hover {display: block}由于.items div设置为display:none. 隐藏项不响应:hover伪选择器。

此外，我认为您拥有的 HTML 结构不会允许悬停以您想要的方式工作，因为无法告诉目标#item它的激活链接href="#item"正在悬停。

您可以使用列表实现结果：http: //jsfiddle.net/Peteor/KcGCZ/因为这允许您在父元素悬停时显示子元素。

.menu li:hover ul {
    display:block;
}