CSS 过滤器在 Firefox 或 IE 中不起作用答案

【问题标题】：CSS filter not working in Firefox or IECSS 过滤器在 Firefox 或 IE 中不起作用
【发布时间】：2018-05-17 00:03:11
【问题描述】：

我正在尝试使用 CSS 过滤器在悬停时模糊图像。图像包含在一个按钮中。它适用于 Opera、Chrome 和 Edge。它在 Firefox 或 IE 中不起作用。如果我将过滤器放在按钮本身上，它适用于所有浏览器，但我更喜欢只有图像模糊。任何帮助，将不胜感激。 CSS

button>img:hover {
  filter: blur(2px);
}

HTML

  <button type="button">
    <img src="http://factory38.com/gallery-images/tree_thumb.jpg" width="200" alt="tree">
</button>

演示

https://codepen.io/mrsmith71/pen/wjYoOY

【问题讨论】：

标签： html css filter cross-browser

【解决方案1】：

filter 似乎处于实验阶段，缺乏对某些浏览器的支持。

但是这里的原因似乎不同，在我测试的 Firefox 上，图像不被认为是悬停的，它是按钮，所以这将起作用（:hover 是按钮而不是图像）：

button:hover img {
  filter: blur(2px);
}

button{
  width: 300px;
  background: repeating-linear-gradient(
    45deg,
    #606dbc,
    #606dbc 10px,
    #465298 10px,
    #465298 20px
  );
}

<button type="button">
    <img src="http://factory38.com/gallery-images/tree_thumb.jpg" width="200" alt="tree">
</button>

编辑：在 Firefox、Chrome 和 Edge 上测试并运行

【讨论】：

这正是我发现的。所以至少不只是我。如果我真的关心所有浏览器上的模糊，我想我最好的选择是在按钮而不是图像上进行。
实际上这应该只将模糊添加到图像，而不是按钮。但它以悬停按钮中的任何图像为目标，而不是在按钮中标记任何悬停图像
@cjsmith 编辑了更大尺寸和条纹的按钮，以证明模糊仅在图像上
噢！我有“button>img:hover”，应该有“button:hover img”。谢谢你让我理顺。非常感谢