html5鼠标悬停图片变淡,鼠标移动悬停在图片上图片变色或半透明变化效果实现...

DIV CSS鼠标移动悬停在图片上图片变色或半无色变幻成效完成，CSS鼠标悬停图片上图片变灰、图片变色、图片半透明

一、CSS5先容与说明：

看到网页中的图片当鼠标挪动到图片上时(鼠标悬停在图片上)图片变灰，看似变色变灰成就，现实是图片被CSS设置装备摆设为半透明花色。

二、要害CSS代码：

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代码

.div1,.div2{ width:500px; margin:20px auto}

.div1 a:hover img{filter:alpha(Opacity=80);-moz-opacity:0.8;opacity: 0.8}

.div2 a:hover img{filter:alpha(Opacity=70);-moz-opacity:0.7;opacity: 0.7}

这里配置了对DIV对象盒子里的超链接内图片设置hover伪类半透明成绩。

2、关头HTML代码

鼠标移动到图片悬停时，图片变色滤镜造诣：