如果 child 处于焦点状态(已被点击)，我如何才能失去 parent 的悬停状态？我有一个菜单箭头(将其替换为 OPEN 以减少代码)，它会在悬停时打开我的菜单，当我单击它们时会聚焦菜单项。 单击菜单项后，我希望能够失去对父项的关注，以便菜单可以消失。
如果可能的话，我尽量避免使用任何 javascript，这是我最好的尝试...
.submenu:not(.submenu ul li a:focus):hover {
display: block;
}
这是我的html
.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>编辑
我在单页应用程序上使用 AngularJS 框架，点击 anchor 不会像标准 html 那样重新加载页面。
最佳答案
.submenu:hover ul li:active,
.submenu:hover ul li:active ~ li {
display: none;
}您可以试试这个，但不确定您是否可以在 href 中提供任何链接，因为它使用的是 display none。
如果它不起作用，那么您可能需要使用 jQuery/javascript 来实现预期的行为。
关于html - 停止将鼠标悬停在子元素上单击，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/55726331/