CSS鼠标悬停图片上图片变灰 变色 半透明

DIV CSS鼠标移动悬停在图片上图片变色或半透明变化效果实现，CSS鼠标悬停图片上图片变灰、图片变色、图片半透明

一、DIVCSS5介绍与说明： - TOP

看到网页中的图片当鼠标移动到图片上时（鼠标悬停在图片上）图片变灰，看似变色变灰效果，实际是图片被CSS设置为半透明样式。

二、关键CSS代码： - TOP

a:hoverimg{
    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:20pxauto}
.div1a:hoverimg{
    filter:alpha(Opacity=80);
    -moz-opacity:0.8;
opacity:0.8}
.div2a:hoverimg{
    filter:alpha(Opacity=70);
    -moz-opacity:0.7;
opacity:0.7}
    

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

2、关键HTML代码

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

3、效果对比截图

CSS样式实现鼠标放图片上图片变化效果截图

四、在线演示与下载 - TOP

1、在线演示

查看案例

2、下载实例源代码压缩包

立即下载（66.387KB）

• DIVCSS5为您推荐的相关联教程
• div层半透明
• CSS让图片实现半透明
• div css背景或图片半透明
• CSS 解决ie6 png透明
• CSS解决PNG图片在IE6中背景不透明

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！