鼠标悬浮导航栏背景和字体变色效果

快乐打工仔 分类:实例代码

鼠标悬浮导航栏背景和字体变色效果属于前端实例代码,有关更多实例代码大家可以查看

网站一般都会对导航栏下一些功夫,无论从功能还是外观一般都会进行精心的设计。

本章节介绍一个最简单的导航栏效果,就是鼠标悬浮的时候,能够使导航栏的背景变色。

代码实例如下:

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<title>犀牛前端部落</title>
<style type="text/css">
#navigation{
  width:200px;
  font-family:Arial;
}
#navigation ul{
  list-style-type:none;
  margin:0px;
  padding:0px;
  text-decoration:none;
}
#navigation li{
  border-bottom:1px solid #ED9F9F;
}
#navigation li a{
  display:block; 
  padding:5px 5px 5px 0.5em;
  text-decoration:none;
  border-left:12px solid #711515; 
  border-right:1px solid #711515; 
}
#navigation li a:link, #navigation li a:visited {
  background-color:#c11136; 
  color:#FFFFFF; 
}
#navigation li a:hover{
  background-color:#990020; 
  color:#ffff00;
}
</style>
</head>
<body>
  <div id="navigation">
    <ul>
      <li><a href="#">犀牛前端部落一</a></li>
      <li><a href="#">犀牛前端部落二</a></li>
      <li><a href="#">犀牛前端部落三</a></li>
      <li><a href="#">犀牛前端部落四</a></li>
      <li><a href="#">犀牛前端部落五</a></li>
    </ul>
  </div>
</body>
</html>

以上代码实现了我们的要求,代码也比较简单,下面介绍一下它的实现过程,因为对初学者可能会有难度。

一.实现原理:

原理就是利用的链接伪类选择器设置链接a元素的背景和字体颜色。

链接伪类选择器可以参阅CSS E:visited链接伪类选择器一章节 。

#navigation ul{
  list-style-type:none;
  margin:0px;
  padding:0px;
}

list-style-type:none删除列表默认的序列标志。

#navigation li a{
  display:block; 
  padding:5px 5px 5px 0.5em;
  text-decoration:none;
  border-left:12px solid #711515; 
  border-right:1px solid #711515; 
}

display:block将链接a设置为块级元素,这样就可以设置padding了,否则可能会出问题。

em单位可以参阅CSS的长度单位em一章节。 

text-decoration:none删除链接默认的下划线。

鼠标悬浮导航栏背景和字体变色效果,这样的场景在实际项目中还是用的比较多的,关于鼠标悬浮导航栏背景和字体变色效果就介绍到这了。

回复

我来回复
  • 暂无回复内容