CSS筛选器无法在Firefox或IE中运行

Question

I'm trying to use a CSS filter to blur an image on hover. The image is contained in a button. It works in Opera, Chrome, and Edge. It doesn't work in Firefox or IE. If I put the filter on the button itself it works in all the browsers, but I'd prefer for only the image to blur. Any help would be appreciated. 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>

Demo

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

Answer 1

filter seems to be at experimental stage and lacks of support for some browsers.

However the cause seems different here, on Firefox where i tested, the image is not considered hovered, it's the button that is, so that this will work ( :hover is on button instead of image):

 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> 

Edit : tested and works on Firefox, Chrome and Edge