Firefox 无法识别悬停答案

【问题标题】：Firefox doesn't recognize hoverFirefox 无法识别悬停
【发布时间】：2018-05-08 15:50:24
【问题描述】：

我正在尝试实现一个纯 CSS 弹出上下文菜单并让它在 Chrome 中运行得相当好，但 FireFox 让我很难过。我可以通过聚焦按钮来打开菜单。但在 Chrome 中有效的光标和悬停效果在 Firefox 中无效。它是可见的，但 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。

【问题讨论】：

【解决方案1】：

将导航移到按钮元素之外就可以了。

【讨论】：

【解决方案2】：

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

查看mdn了解更多信息。

您可以跳转到“点击和聚焦”部分。

【讨论】：