微思考源码weisico.com|分享互联网优质资源,免费织梦模板,WP主题下载

CSS鼠标悬停在图片上图片变色或半透明变化效果的实现

看到网页中的图片当鼠标移动到图片上时(鼠标悬停在图片上)图片变灰,看似变色变灰效果,实际是图片被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的支持。

鼠标移动到图片变色,图片半透明实例    -   TOP

实例案例描述:设置两个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代码

    <p>鼠标移动到图片悬停时,图片变色滤镜效果:</p> 
    <div class="div1">
    <a href="#"><img src="images/weisico_bg.png" />
    </a>
    </div> 
    <div class="div2">
    <a href="#"><img src="images/weisico_an.jpg" />
    </a>
    </div>

3.效果对比截图wei01.pngwei02.pngwei03.png

在线演示查看案例

源码压缩包下载地址:立即下载(202KB)  密码: fwnq


微信公众号 weisico-com

微信公众号weisico-com

转载请注明:微思考学习网-关注技术,分享知识 >> CSS鼠标悬停在图片上图片变色或半透明变化效果的实现

赞 (0) 收藏
分享到