firefox - Firefox“可见性”属性错误？

Question

我有一些 div (class="boxes") 在段落标签中有一些文本。我想要的是文本是不可见的，除非悬停。

然而，事情的表现很奇怪。当我使用： .boxes p{visibility:hidden;} .boxes p:hover{visibility:visible;} 文本被隐藏但在悬停时不可见。

当我尝试： .boxes p{visibility:visible;} .boxes p:hover{visibility:hidden;}
文本将（片刻后）消失，但如果光标完全移动，则“闪烁”。

知道这里发生了什么吗？Firefox 经常自动更新，所以我相信我运行的是最新版本。

谢谢！

Answer 1

通过使框不可见，选择器停止匹配它们，这使它们可见，然后使您的原始选择器再次匹配它们，并且您从无限循环中获得闪烁。

如果你想让你的盒子仍然可以悬停，或者给它们另一个父元素并隐藏它们：

.boxes .parent:hover p {
    visibility: hidden;
}

或者在悬停时给框零不透明度：

.boxes p:hover {
    opacity: 0;
}