使用css经过图片图片变灰色

时间：2015-04-02 15:59:50 　来源：免费模板网　作者：风雪　阅读次数　tagscss运用

我们经常上网的时候会见到，有些网站的某个部分，在鼠标放上后背景颜色会改变，移开后恢复，给人很不错的操作体验，那么这个效果是怎么用CSS来实现的呢？请不知道的朋友认真参考一下本款代码，它专门是用来完成这一功能的代码。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>鼠标经过背景变色的CSS代码</title>
<meta http-equiv="content-type" content="text/html;charset=gb2312">
<style type="text/css">
*{
	margin:0;
	padding:0;
	list-style:none;
	font-size:14px;
}
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;
	color:red;
}
span{
	display:block;
	width:100%;
	clear:both;
	text-align:center;
}
</style>
</head>
<body>
<div class="info">
	<ul>
	<li><a href="#" class="img"><img src="/jscss/demoimg/wall_s1.jpg"><span>图片名称</span></a></li>
	<li><a href="#" class="img"><img src="/jscss/demoimg/wall_s3.jpg"><span>图片名称</span></a></li>
	<li><a href="#" class="img"><img src="/jscss/demoimg/wall_s2.jpg"><span>图片名称</span></a></li>
	</ul>
</div>
</body>
</html>

上篇：用css做tab选项卡

下篇：运用css实现层的嵌套

本文地址：https://www.freemoban.com/bjrm/2015/0402/1172.html

猜你喜欢