CSS如何实现超链接背景切换:
建议:尽可能的手写代码，可以有效的提高学习效率和深度。
相当数量的网站在导航栏都有如此效果:当鼠标放在导航栏目上，背景图片会发生变化，移开之后又会还原原来的背景图片。下面简单介绍一下如何实现此效果。代码实例如下:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style type="text/css">
div{
height:28px;
width:300px;
border-bottom:3px solid #E10001;
}
ul{
list-style:none;
margin:0px;
padding:0px;
}
ul li{
float:left;
width:87px;
height:28px;
margin-left:2px;
display:inline;
}
ul li a{
width:87px;
height:28px;
display:block;
font-size:14px;
text-align:center;
line-height:28px;
text-decoration:none;
color:#333;
background:url(mytest/demo/bg1.gif) no-repeat;
}
ul li a:hover{
background:url(mytest/demo/bg2.gif) no-repeat;
}
</style>
</head>
<body>
<div>
<ul>
<li><a href="#">CSS专区</a></li>
<li><a href="#">JS专区</a></li>
<li><a href="#">HTML专区</a></li>
</ul>
</div>
</body>
</html>
以上代码实现了我们的要求。实现的过程非常简单:
第一步，将超链接的默认状态下设置一个背景图片。
第二部，在鼠标放到超链接上的时候设置成另一张背景图片。
注意:a元素必需要转换成块级元素，否则无法设置高度和宽度。
背景图片也是可以合并在一张图片上，相关内容可以参阅CSS如何将背景图片合并在一张图片上一章节。
原文地址是:http://www.softwhy.com/forum.php?mod=viewthread&tid=4683
时间： 2024-10-05 10:02:07