Firefox无法识别悬停

Question

我正在尝试实现一个纯CSS弹出上下文菜单，并让它在Chrome中运行得相当不错，但FireFox让我感到难过。我可以通过聚焦按钮打开菜单。但是在Chrome中无法使用Chrome中的光标和悬停效果。它是可见的，但Firefox表现得并非如此。

我有一个jsfiddle，证明它在这里： https://jsfiddle.net/jeffmarston/j1c9x9mL/

关键是以下CSS：

nav button:focus nav {
  visibility: visible;
  opacity: 1;
}
nav li a:hover {
  background-color: #b0e0e6;
  transition: none;
}

当按钮聚焦时，第一个选择器使导航可见。 当项目悬停时，第二个应更改背景颜色，但仅适用于Chrome。

Answer 1

对于单击按钮来接收:focus sudo类，并不是所有浏览器中的标准。

在mdn上查看以获取更多信息。

您可以跳转到＆＃34;点击并关注＆＃34;部分。

Answer 2

将按钮元素外部的导航移动就可以了。