CSS如何实现超链接背景切换

当前位置 : 首页 > 网页制作 > CSS > CSS如何实现超链接背景切换

CSS如何实现超链接背景切换

来源:互联网 作者:脚本宝典 时间:2015-09-16 10:05
CSS如何实现超链接背景切换: 建议:尽可能的手写代码,可以有效的提高学习效率和深度。 相当数量的网站在导航栏都有如此效果:当鼠标放在导航栏目上,背景图片会发生变化,移开之

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元素必需要转换成块级元素,否则无法设置高度和宽度。
背景图片也是可以合并在一张图片上

Tag:

相关文章

网友评论

<