资讯

精准传达 • 有效沟通

从品牌网站建设到网络营销策划,从策略到执行的一站式服务

CSS怎么实现鼠标悬停图片上图片变灰

本文小编为大家详细介绍“CSS怎么实现鼠标悬停图片上图片变灰”,内容详细,步骤清晰,细节处理妥当,希望这篇“CSS怎么实现鼠标悬停图片上图片变灰”文章能帮助大家解决疑惑,下面跟着小编的思路慢慢深入,一起来学习新知识吧。

目前创新互联已为上1000家的企业提供了网站建设、域名、网页空间、成都网站托管、企业网站设计、惠州网站维护等服务,公司将坚持客户导向、应用为本的策略,正道将秉承"和谐、参与、激情"的文化,与客户和合作伙伴齐心协力一起成长,共同发展。

一、DIVCSS5介绍与说明:   

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

三、鼠标移动到图片变色,图片半透明实例   过对其设置鼠标悬停(: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代码

鼠标移动到图片悬停时,图片变色滤镜效果:

 
 

3、效果对比截图

CSS怎么实现鼠标悬停图片上图片变灰

读到这里,这篇“CSS怎么实现鼠标悬停图片上图片变灰”文章已经介绍完毕,想要掌握这篇文章的知识点还需要大家自己动手实践使用过才能领会,如果想了解更多相关内容的文章,欢迎关注创新互联行业资讯频道。


网页标题:CSS怎么实现鼠标悬停图片上图片变灰
链接URL:http://cdkjz.cn/article/gcpgge.html
返回首页 了解更多建站资讯
多年建站经验

多一份参考,总有益处

联系快上网,免费获得专属《策划方案》及报价

咨询相关问题或预约面谈,可以通过以下方式与我们联系

大客户专线   成都:13518219792   座机:028-86922220