css怎么实现鼠标移入img变暗
2013-02-21 · 知道合伙人软件行家
关注
展开全部
<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
.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样式就可以了
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>
一。伪类: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上面覆盖层使其透明
追问
额,不能把,不有那种透明嘛,我已经实现了,还是得谢谢你!
已赞过
已踩过<
评论
收起
你对这个回答的评价是?
推荐律师服务:
若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询