js+css鼠标经过背景变色的双边框图片展示效果

时间：2022-07-02 14:51:04 编辑：袖梨来源：一聚教程网

提示：您可以先修改部分代码再运行

js+<a href=http://111com.net/cssdiv/css.html target=_blank >css</a>鼠标经过背景变色的双边框图片展示效果
<!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></title>
<meta http-equiv="content-type" content="text/html;charset=gb2312">

<style type="text/<a href="http://www.111com.net/cssdiv/css.html" target="_blank">css</a>">
img{
	border:1px solid #ccc;
}
.info li {
	padding:5px;
	
	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;
	
	clear:both;
	text-align:center;
}
</style>
</head>
<body>

<div class="info">
  <ul>
    <li><a href="http://www.zzsky.cn" target="_blank" class="img"><img  alt="js+css鼠标经过背景变色的双边框图片展示效果"  src="https://img.111com.net/get_pic/20090930091410371.jpg"><span>图片一</span></a></li>
    <li><a href="http://www.zzsky.cn" target="_blank" class="img"><img  alt="js+css鼠标经过背景变色的双边框图片展示效果"  src="https://img.111com.net/get_pic/20090930091417280.jpg"><span>图片二</span></a></li>
    <li><a href="http://www.zzsky.cn" target="_blank" class="img"><img  alt="js+css鼠标经过背景变色的双边框图片展示效果"  src="https://img.111com.net/get_pic/20090930091424579.jpg"><span>图片三</span></a></li>
  </ul>
</div>
</body>
</html>

提示：您可以先修改部分代码再运行

推荐专题

最新下载

热门教程

js+css鼠标经过背景变色的双边框图片展示效果

相关文章

热门栏目

php教程

asp.net教程

手机开发

css教程

网页制作

办公数码

jsp教程