CSS鼠标经过图片变亮,移开变变暗效果代码怎么写
4个回答
展开全部
1、打开hbuilder，在空白的html文件上面设置一个div，给div一个class并命名为img：
2、在css里设置img的类一定的宽和高，引入示例图片，设置图片为不重复。并且给img的类设置“:hover”伪类，设置伪类内的透明度为0.6：
3、打开浏览器，在浏览器内查看效果：
4、将鼠标移入图片，就会发现图片已经变亮了。以上就是用CSS设置鼠标经过图片变亮，移开变变暗效果的演示：
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
原理就是制作两套样式，分别运用在鼠标放上和拿开的时候，比如楼下的同学说的：
img {opacity:0.8;filter(alpha=80)}
img:hover {opacity:1;filter(alpha=100)}但是用透明度的方法似乎没有变亮，变暗的效果。
建议可以在图片上加一个层来控制：
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<title>JS Bin</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<style>
#tabbox{ width: 300px; height: 300px; position: relative;}
.imgbg{width: 300px; height: 300px; top: 0; left: 0; position: absolute; background: #000; opacity:0;filter(alpha=0)}
.imgbg:hover{ opacity:0.5;filter(alpha=50)}
</style>
</head>
<body>
<div id="tabbox">
<img src="/6rooms/html/img/1.jpg" alt="">
<div class="imgbg"></div>
</div>
</body>
</html>
希望能帮到你！
本回答被提问者采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
加hover的CSS即可。
img {opacity:0.8;;filter(alpha=80)}
img:hover {opacity:1;filter(alpha=100)}
img {opacity:0.8;;filter(alpha=80)}
img:hover {opacity:1;filter(alpha=100)}
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
img:hover {
opacity:0.7;
filter:alpha(opacity=70);
}
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
更多回答（2）
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
