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。

为什么firefox忽略css：hover选择器？

1 个答案: