html - 为什么 firefox 忽略 css :hover selector?

Question

我正在为我的按钮图标设置一个简单的动画。将鼠标悬停在按钮上后，按钮中的图像应该从默认的 0.25 不透明度变为 1。在 chrome/edge 上运行良好，但 firefox 似乎忽略它 (:hover)。

第一个猜测是 firefox 不知何故不支持不透明。它确实如此，因为图像的默认值设置为 0.25 不透明度。永远不需要任何前缀。此外，光标根本不会改变。然后想也许它是 :hover，但自石器时代以来就应该 100% 支持它。 然后我突然想到这可能是由于我正在使用的 CSS 网格级别 2 布局设计，实际上尚未在浏览器中完全实现。我在 firefox 中启用了一些布局标志，但这也没有带来解决方案。无论如何制作这个示例表明它与 CSS 网格布局无关。 我尝试使用 javascript 但没有帮助。我想无论如何这是一个不好的做法。 我最后的尝试是尝试增加特异性 - 这里也没有运气，算了吧。

button {
  padding: 20px 40px;
}

.images {
  opacity: 0.25;
}

.images:hover {
  opacity: 1;
  cursor: pointer;
}

<button type="button"><img class="images" src="https://img.icons8.com/metro/160/settings.png"></button>
<button type="button"><img class="images" src="https://img.icons8.com/metro/160/settings.png"></button>

我希望将鼠标悬停在上方会增加图像的不透明度，并将光标更改为指针。如果有任何反馈，我将不胜感激。

Answer 1

试试这个:

button {
  padding: 20px 40px;
}

button .images {
  opacity: 0.25;
}

button:hover .images{
  opacity: 1;
  
}
button{
  cursor: pointer;
}

<button type="button"><img class="images" src="https://img.icons8.com/metro/160/settings.png"></button>
<button type="button"><img class="images" src="https://img.icons8.com/metro/160/settings.png"></button>

我改变了您在 CSS 中调用 HTML 元素的方式。对我来说，它适用于 firefox 64.0.2(64 位)。

编辑: Firefox 不会忽略 :hover事件。但是按钮元素窃取了所有鼠标事件的优先级。这就是为什么在元素内部，作为你的 <img>不能悬停。这就是 Firefox 解释这段代码的方式。

你也可以看看this post .