CSS滤镜实现鼠标悬停图片变黑白(灰色)全兼容

效果描述：默认图片是彩色效果，当鼠标悬停在图片上后，图片变成灰白色(注意：不兼容IE10)

原理：只要给图片悬停的hover效果加一个样式即可，即： filter: grayscale(100%);
 
代码如下：
 

<style>

#zone{ margin:100px auto; cursor:pointer;}

#zone img:hover{-webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); -o-filter: grayscale(100%); filter: grayscale(100%); filter: gray;}

</style>

<div id="zone">

<img src="/images/zone.jpg" />

</div>