之前,我们实现鼠标移动,图片切换的效果,大多使用js实现。但最近工作需要,发现用css直接实现也是不错的。
说明:通过ul li span插入图片,一个span包含一个图片,一个图片隐藏,一个图片显示。通过li:hover,li:active,来切换2个图片的显示。因为项目中img是动态提取js生成的html,个数也不一定,这样子整体不固定,方便了框架的管理与灵活!
相关知识点:
1.鼠标经过的“未访问链接”同时拥有a:link、a:hover两种属性,后面的属性会覆盖前面的属性定义;
2.鼠标经过的“已访问链接”同时拥有a:visited、a:hover两种属性,后面的属性会覆盖前面的属性定义;
http://www.cnblogs.com/xiaochaohuashengmi/archive/2010/09/06/1819624.html
html:
<html>
<head>
<title>css</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<link type="text/css" rel="stylesheet" href="try.css">
<script type="text/javascript">
</script>
</head>
<body bgcolor="#E0E0E0">
<div class="toppic">
<ul>
<li class="active">
<span class="jpgs"><img src="a.jpg" width="100" height="100"/></span>
<span class="jpgh"><img src="getqrcode.jpg" width="100" height="100"/></span>
</li>
<li>
<span class="jpgs"><img src="a.jpg" width="100" height="100"/></span>
<span class="jpgh"><img src="getqrcode.jpg" width="100" height="100"/></span>
</li>
<li>
<span class="jpgs"><img src="a.jpg" width="100" height="100"/></span>
<span class="jpgh"><img src="getqrcode.jpg" width="100" height="100"/></span>
</li>
</ul>
</div>
</body>
</html>
css:
.jpgh{
display:none;
}
.toppic ul li.active span.jpgh{
display:block;
}
.toppic ul li.active span.jpgs{
display:none;
}
.toppic ul li:hover span.jpgs{
display:none;
}
.toppic ul li:hover span.jpgh{
display:block;
}
附件是完成效果,示例不是很美观,只是体现了这个实现过程