在悬停时显示下拉菜单,仅使用CSS关闭

Question

有人可以帮我解释为什么当我点击它们时,下拉菜单中的链接无效吗？也许是因为指针事件？我正在尝试在单击链接或单击关闭按钮后关闭下拉菜单.我添加了一些很酷的东西,比如单击链接时隐藏父容器.

有很多选择:

1. 使用:focus但是当使用焦点时,下一个悬停在下拉列表中不会触发下拉列表.

2. :active在容器上使用并pointer-events仅指向活动链接,但指针事件是错误的

3. 使用:target但具有相同的问题:焦点,不会触发第二个胡佛.

body {
    padding: 20px;
}
.container {
    border: 1px solid lime;
    padding: 10px;
    width: 200px;
}
.test1 {
    display: none;
    border: 1px dashed orange;
    background: green;
    padding: 10px;
    pointer-events: none;
}
.container:hover .test1 {
    display: inline-block;
}
.container:hover .test1:active {
    display: none;
}
a {
    pointer-events: auto;
    color: lime;
    font-weight: bold;
}

<ul class="container">
	 Drop down menu
	<li class="test1">
	<a class="dropdown" href="#">X Close</a>
	<ul class="content">
		 CLOSE THIS CONTENT
		<li class="link"><a href="http://www.google.com">Go to link 1</a></li>
		<li class="link"><a href="https://www.google.co.uk">Go to link 2</a></li>
		<li class="link"><a href="https://www.google.co.uk">Go to link 3</a></li>
	</ul>

Answer 1

快速检查：工作 JSFiddle

有人可以帮我解释一下为什么当我点击下拉菜单中的链接时它们不起作用？也许是因为指针事件？

解释为什么会出现这种行为：是的，你是对的，这是因为你使用:active选择器逻辑的方式，要详细解释，请考虑你的 this CSS 规则

.container:hover .test1:active {
    display: none;
}

您的主菜单下有菜单链接li.test1，任何对内部链接的点击也会冒泡到该元素，因此它与点击li. 因此，一旦按住鼠标（鼠标按下事件），它就会触发该:active事件，并且您将隐藏links（即：）li.test1，但是只有当鼠标同时按下和向上时，单击事件才完成。所以现在 已li隐藏并且mouse up不再位于链接上。正如您所看到的，点击事件不可能被触发。这就是问题所在。

I saw other answers which you seem to be interested in and this really doesn't need any kind of hack, It can be done by just formatting your HTML and with some CSS changes.

解决方案：li.test1您可以使用两个不同的li，而不是将内部菜单链接包装在 中，一个用于保存X CLose，另一个用于保存menu links。有了这个，我们就可以确保当它处于li.test1活动状态时（即鼠标按下），我们可以隐藏它以及与其相邻的另一个新的。li因此，这意味着每当用户单击X Close li我们就会隐藏菜单，如果他单击其他菜单项，您就会被重定向。

所以你的 HTML 结构的变化应该是这样的

<ul class="container">
  Drop down menu
  <li class="test1">
    <a class="dropdown" href="#">X Close</a>
  </li>
  <li class="MenuLinks">
    <ul class="content">
      <!-- all your links go here-->
    </ul>
  </li>
</ul>

主要 CSS 规则是

.container:hover .test1:active,
.container:hover .test1:active + .MenuLinks {
  display: none;
}

下面是一个 SO 工作片段

.container:hover .test1:active {
    display: none;
}

<ul class="container">
  Drop down menu
  <li class="test1">
    <a class="dropdown" href="#">X Close</a>
  </li>
  <li class="MenuLinks">
    <ul class="content">
      <!-- all your links go here-->
    </ul>
  </li>
</ul>

注意：点击链接时的空白屏幕是由于谷歌对跨源策略的安全限制导致控制台中出现此错误

Refused to display 'https://www.google.co.in/?gfe_rd=cr&ei=x2VWWLL2Ae-K8Qfwx4ngDQ' in a frame because it set 'X-Frame-Options' to 'SAMEORIGIN'.

但是，当您单击链接时，您可以在网络选项卡中看到请求。

希望这可以帮助！！