在导航栏悬停时显示 Firefox 57 标签栏答案

【问题标题】：Show firefox 57 tab bar on nav-bar hover在导航栏悬停时显示 Firefox 57 标签栏
【发布时间】：2020-07-17 23:39:04
【问题描述】：

我正在尝试编辑 userChrome.css 文件以默认隐藏 FF 57 上的标签栏，并使用以下代码进行

#TabsToolbar {
    visibility: collapse !important;
}

并且我希望标签栏仅在我将鼠标悬停在导航栏上时可见，即包含地址字段、导航按钮、菜单按钮等内容的工具栏。所以，我确实尝试了以下方式。

#nav-bar:hover+#TabsToolbar{
    visibility: visible !important;
    background-color:red !important;
}

我注意到悬停属性在#nav-bar 上根本不起作用，因为我注意到即使背景颜色也没有改变。

更新：一般来说，css 会这样工作：

#b
{
visibility: collapse;
}
#a:hover+#b
{
visibility: initial !important;
}

<!DOCTYPE html>
<html>
<body>

<toolbar id="a">div a
	<p>This para</p>
</toolbar>
<toolbar id="b">div b</toolbar>
</body>
</html>

【问题讨论】：

没有标记，您的 CSS 将毫无用处。考虑添加一个完全限定的minimal reproducible example (live sn-p) 来重现您的问题。您还应该考虑在此示例中删除 !important。绝对没有什么可以覆盖的，所以...
@AndreiGheorghiu 对于普通的 css div sn-ps 它正在工作，但在 firefox 的情况下它不起作用。我将在上面的问题中以正常情况发布css sn-p
如果不起作用，则表示#nav-bar:hover+#TabsToolbar 与您的元素不匹配。这意味着它与 Firefox 或其版本无关。只是为了测试，在不同的浏览器中打开您的项目。
@AndreiGheorghiu 我使用 chrome 检查器工具 (Ctrl+Alt+Shift+I) 使用 xul 检查了它，并注意到元素的 id 是 #nav-bar 并且它包含所有元素。 #nav-bar 是#TabsToolbar 的下一个元素，#nav-bar 包含许多子元素。
在 Linux 上的 Firefox Quantum 57.0.1（64 位）中完美运行（按预期）。

【解决方案1】：

这对我有用。

#TabsToolbar {
    visibility:collapse;
}

#navigator-toolbox:hover #TabsToolbar{
    visibility: visible !important;
    
}

这是通过检测悬停在整个顶部导航栏上来实现的

【讨论】：