Question

我尝试使用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

Answer 1

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

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

＆＃13;

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

＆＃13;

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

＆＃13;

修改：经过测试，适用于Firefox，Chrome和Edge

CSS过滤器无法在Firefox或IE中运行

1 个答案: