CSS实现鼠标移动图片实现切换功能:
当鼠标放在一个图片上的时候可以切换为其他图片，使用javascript可以实现，下面介绍一下如何使用CSS实现此功能。
代码实例如下:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<head>
<title>CSS实现的图片切换效果-蚂蚁部落</title>
<style type="text/css">
*
{
margin:0;
padding:0;
}
ul li
{
list-style:none;
}
.nav
{
width:800px;
height:40px;
margin:150px auto;
}
.nav ul li
{
float:left;
width:200px;
}
.nav ul li a:link, a:visited
{
display:block;
width:190px;
height:40px;
background:url(images/wall_s1.jpg);
}
.nav ul li a:hover
{
background:url(images/wall_s2.jpg);
}
.nav ul li a:active
{
background:url(images/wall_s3.jpg);
}
</style>
</head>
<body>
<div class="nav">
<ul>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
</ul>
</div>
</body>
</html>
以上代码实现了，当鼠标放在链接上时，能够实现图片的切换功能。
原文地址是:http://www.softwhy.com/forum.php?mod=viewthread&tid=8354
更多内容可以参阅:http://www.softwhy.com/divcss/
时间： 2024-10-19 14:52:05