css怎么实现鼠标移入img变暗

发布网友

我来回答

共5个回答

懂视网

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

css 鼠标经过图片，图片变色变暗透明
?
?

代码注释：

filter 设置平台IE半透明效果样式，值1-100，值越小越透明，设置IE8以前的透明使用

opacity 设置IE半透明效果样式，值0.1-1，值越小越透明，设置IE8以后版本的透明使用

-moz-opacity 对非IE浏览器设置，比如火狐，语法与IE相同。

完整实例：

 
 
 
 

 
 
css 鼠标经过图片，图片变色变暗透明
?
?

 

在线运行

热心网友

<style>
.bg{
width:200px;
height:100px;
background:url(bottom_bg.jpg);
}
a{
display: block;
width:100%;
height:100%;
}
a:hover{
filter:alpha(opacity=80);
background:#000;
opacity:0.5;
}
</style>
<div class="bg"><a href="#"></a></div>
用css实现了。。。不过没有渐变效果，要做的话需要js追问谢谢亲，我弄好了，谢了啊，哥们

热心网友

a{}
a:hover{}照这种模式设置一下css样式就可以了

热心网友

先用PS做2个JPG图片，比如：原本的图片light.jpg和移上去变暗的图片dark.jpg

一。伪类:hover (ie6不支持)

.box{ background:url(../images/light.jpg); }
.box:hover{ background:url(../images/dark.jpg); }

ie6只能对a标签使用伪类。

.box a, .box a:link{ background:url(../images/light.jpg); }
.box a:hover{ background:url(../images/dark.jpg); }

二。使用jquery做图片切换动作

css部分：

.bg1{background:url(../images/light.jpg);}
.bg2{background:url(../images/dark.jpg);}

jquery部分：

$(function(){
$('div').hover(function(){
$(this).atter('class','bg2');

},function(){
$(this).atter('class','bg1');
});
});

html部分：
<div class="bg1"></div>追问谢谢亲，我弄好了，谢了啊，哥们

热心网友

无法实现，只能在img上面覆盖层使其透明追问额，不能把，不有那种透明嘛，我已经实现了，还是得谢谢你！