滑鼠懸浮導航欄背景和字型變色效果

admin發表於2018-07-15

網站一般都會對導航欄下一些功夫，無論從功能還是外觀一般都會進行精心的設計。

本章節介紹一個最簡單的導航欄效果，就是滑鼠懸浮的時候，能夠使導航欄的背景變色。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<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連結偽類選擇器一章節 。

[CSS] 純文字檢視 複製程式碼
#navigation ul{
  list-style-type:none;
  margin:0px;
  padding:0px;
}

list-style-type:none刪除列表預設的序列標誌。

[CSS] 純文字檢視 複製程式碼
#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刪除連結預設的下劃線。

相關文章