Question

如果孩子处于焦点位置（已被单击），我怎么能失去父母的悬停状态？我有一个菜单箭头（用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框架，在我的情况下，单击锚点不会像标准html那样重新加载页面。

Answer 1

[['    another_function()\n'], 
 ["inspect_me(inspect_this='hello')\n"]]

您可以尝试使用此方法，但不确定是否可以在href中提供任何链接，因为它没有使用显示。

如果它不起作用，则可能需要使用jQuery / javascript来实现预期的行为。

Answer 2

解决方案的名称为:not(:focus-within)， IF ，单击事件将在锚点的click事件之前。因此，从不调度click事件，并且您的菜单不起作用。恐怕在这种情况下您不能没有JS。

.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>

停止将鼠标悬停在子元素单击上的元素上

2 个答案: