css鼠标滑过/指向图片变色变暗变亮

时间:2016-05-16
css鼠标指向或滑过，我们可以使用css hover伪类，图片变色可以使用background，变亮变暗可以使用css opacity属性。本文章向码农介绍css鼠标滑过/指向图片变色变暗变亮实例。

实例代码如下：

<style>
*{margin:0;padding:0;list-style:none;}
img{border:1px solid #ccc}
.info li { padding:5px;width:144px;float:left}
.info li .img { padding:5px; border:1px solid #CBCBCB;display:block;}
.info li .img:link,.info li .img:visited {border:1px solid #CBCBCB;}
.info li .img:hover{border:1px solid #CBCBCB;background:#f0f0f0;filter:alpha(Opacity=80);-moz-opacity:0.8;opacity: 0.8}
</style>
</head>

<body>
<div class="info">
<ul>
<li><a href="#" class="img" ><img src="#" /></a></li>
<li><a href="#" class="img" ><img src="#" /></a></li>
<li><a href="#" class="img" ><img src="#" /></a></li>
</ul>
</div>

大家可以参考 css3 opacity 属性

随机文章
WEB前端知识点必读
最近更新