a:hover img{filter:alpha(opacity=80);-moz-opacity:0.8;opacity: 0.8;}
此css代码作用，设置鼠标移动到a超链接时，超链接内图片（img）呈现半透明显示80%效果。
解释：
filter 设置平台ie半透明效果样式，值1-100，值越小越透明，设置ie8以前的透明使用
opacity 设置ie半透明效果样式，值0.1-1，值越小越透明，设置ie8以后版本的透明使用
-moz-opacity 对非ie浏览器设置，比如火狐，语法与ie相同
此设置css样式opacity、filter在ie6中不支持，因为现在ie6版本占有急剧下滑，所以一般不考虑ie6对此css的支持。
鼠标移动到图片变色，图片半透明实例
实例案例描述：设置两个div盒子，两个盒子分别放入一张图，通过对其设置鼠标悬停(:hover)时图片半透明为80%和70%，观察其效果。
1、关键css代码
.p1,.p2{ width:500px; margin:20px auto} .p1 a:hover img{filter:alpha(opacity=80);-moz-opacity:0.8;opacity: 0.8} .p2 a:hover img{filter:alpha(opacity=70);-moz-opacity:0.7;opacity: 0.7}
这里设置了对div对象盒子里的超链接内图片设置hover伪类半透明效果。
2、关键html代码
<p>鼠标移动到图片悬停时，图片变色滤镜效果：</p> <p class="p1"><a href="#"><img src="images/p-a-bg.png" /></a></p> <p class="p2"><a href="#"><img src="images/an.gif" /></a></p>
相信看了这些案例你已经掌握了方法，更多精彩请关注其它相关文章！
相关阅读：
原生js的常用方法整理
用vue+css3怎么做交互特效
详解前端响应式布局、响应式图片，与自制栅格系统
以上就是怎样用css让鼠标悬停在图片上图片变灰的详细内容。