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;
}