为什么Firefox忽略CSS中的:hover选择器？

Question

为什么Firefox忽略CSS中的:hover选择器？

5

我正在为我的按钮图标设置简单的动画效果。在悬停后，按钮中的图像应从默认的0.25透明度变为1。在Chrome/Edge上运行良好，但Firefox似乎忽略了(:hover)。

第一个猜测是Firefox可能不支持透明度。实际上它支持透明度，因为将图像的默认值设置为0.25透明度是有效的。没有必要使用任何前缀。此外，光标根本就不会改变。然后我想也许是:hover，但这从史前时代以来就应该被支持了。然后，我突然想到这可能是由于使用的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>

我希望鼠标悬停时可以使图像的不透明度增加，并将光标更改为指针。如有任何反馈，感激不尽。

- Tyiliyra

请尝试访问 https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/input/image。 - Alon Eitan

@AlonEitan — 服务器端的图像映射与包含图像的提交按钮有很大的区别。 - Quentin

在我的Firefox (Windows)中，透明度变化有效，光标变化无效。 - connexo

1

按钮元素周围还有其他的魔法。 - Temani Afif

3

HTML是一种语义标记语言，你不能替换元素而不改变其含义。 - Quentin

显示剩余7条评论

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Alain.D · Accepted Answer

尝试这个：

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解释此代码的方式。

你也可以查看这篇文章。