单击子元素时停止悬停在元素上
如果孩子在焦点中（已被点击），我怎么能失去父母的悬停状态？我有一个菜单箭头（用OPEN代替了它，以减少代码），它在悬停状态下打开我的菜单和菜单项，当我单击它们时，菜单项就会聚焦。在菜单项点击后，我希望能够失去对我父母的关注，这样菜单就会消失。
如果可能的话，我会尽量避免使用javascript，这是我最好的尝试...
.submenu:not(.submenu ul li a:focus):hover {
display: block;
}
这是我的html
null
.open-submenu:hover .submenu {
display: block;
}
.submenu {
display: none;
}
.submenu ul li a:focus {
background-color: yellow;
}
.submenu:not(.submenu ul li a:focus):hover {
display: block;
}<html>
<head>
</head>
<body>
<div class="open-submenu">OPEN
<div class="submenu">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Help</a></li>
</ul>
</div>
</div>
</body>
</html>null
编辑
我在一个单页应用程序上使用AngularJS框架，在我的例子中，点击锚点不会像标准html那样重新加载页面。
共有2个答案
如果click事件将在锚点的click事件之前，则解决方案是:not(:focus-winn)。因此,click事件永远不会被调度,您的菜单也无法工作。恐怕，如果那样的话，你不能没有JS。
null
.open-submenu:hover .submenu:not(:focus-within) {
display: block;
}
.submenu {
display: none;
}
.submenu ul li a:focus {
background-color: yellow;
}<html>
<head>
</head>
<body>
<div class="open-submenu">OPEN
<div class="submenu">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Help</a></li>
</ul>
</div>
</div>
</body>
</html>
null
.submenu:hover ul li:active,
.submenu:hover ul li:active ~ li {
display: none;
}-
问题内容： 首先，我假设对于CSS3来说这太复杂了，但是如果某个地方有解决方案，我很乐意使用它。 HTML非常简单。 子div设置为显示：无；默认情况下，但更改为display：block; 当鼠标悬停在父div上时。问题是此标记出现在我网站上的多个位置，并且我只希望在鼠标悬停在其父项上方时显示该子项，而不是在鼠标悬停在其他任何父项上时都显示该子项（它们都具有相同的类）名称和ID）。 我尝试使用并
-
问题内容： 当父元素悬停时如何更改子元素的样式。如果可能的话，我希望使用CSS解决方案。有没有可能通过：hover CSS选择器解决方案。实际上，当面板上悬停时，我需要更改面板内选项栏的颜色。 希望支持所有主流浏览器。 问题答案： 是的，您绝对可以做到这一点。只需使用类似 根据此页面，所有主流浏览器都支持该页面。
-
问题内容： 如果我有标记： .a类具有与之关联的悬停类 .b类具有与之关联的伪元素…像这样： CSS是否有可能防止伪元素触发.a类悬停？ 小提琴 问题答案： 以下CSS为现代浏览器（而非IE10-）提供了诀窍： 允许元素不接收悬停/点击事件。 警告 对非SVG元素的支持处于相对早期的状态。developer.mozilla.org给您以下警告： 在CSS中将指针事件用于非SVG元素是实验性的。 该
-
问题内容： 我的页面布局涉及很多绝对位置和z索引位置，因此有很多元素相互重叠。 元素之一仅包含文本，它悬停在许多其他事物之上。 在该元素下方，有几个应用了CSS悬停伪类的元素。 当鼠标经过包含文本的元素时，我想以某种方式使下面的Element响应鼠标的存在并激活伪类样式。 有没有什么样式的元素，以便它允许悬停通过它传递给下面的任何元素？ 使用JavaScript并不是很难，但是为了使事情尽可能简单
-
问题内容： 我有一个HTML 标签，并且在div内有一个元素，当鼠标进入其边界时会出现在其中。现在，我要单击在鼠标进入或悬停时可见的元素。 问题：元素开始闪烁。浏览器：IE8 我正在使用下面的代码 有什么建议为什么它会闪烁吗？ 问题答案： 由于IE驱动程序的一个称为“永久悬停”的功能，该元素闪烁。此功能的价值可疑，但由于IE（浏览器，而非驱动程序）在使用API 时对消息做出反应的大脑失效方式，因此
-
问题内容： 我有一个HTML 标签，并且在div内有一个元素，当鼠标进入其边界时会出现在其中。现在，我要单击在鼠标进入或悬停时可见的元素。 问题：该元素开始闪烁。浏览器：IE8 我正在使用下面的代码 有什么建议为什么它会闪烁吗？ 问题答案： 由于IE驱动程序的一个称为“永久悬停”的功能，该元素闪烁。此功能的价值可疑，但是由于IE（浏览器，而不是驱动程序）在使用API 时响应消息的大脑失效方式，因此