效果如下圖：


要實現這個效果。很簡單。 定義CSS樣式：

a:hover{
    background:#f29901;
}

這段程式碼的顯示效果如下圖


顯然，這樣太醜了。

只需要再加上一句
a:hover{
    background:#f29901;
    display:block;
}

即可如效果圖所示，當滑鼠移動到超連結上的時候，整個li元素背景變色。

可是這樣還有一個問題，滑鼠必須移動到文字上面才能觸發a:hover效果。
如果想要滑鼠移動到元素li上的時候，就觸發a:hover效果。可以這樣寫：

a {
    width:130px;  
    /*li元素的寬度，也就是相當於定義了一個寬度範圍，當滑鼠移動到上面的範圍的時候就觸發a:hover效果*/
}

a:hover{
    background:#f29901;
    display:block;
}

下面附上完整例子程式碼：

html程式碼：
 

<ul id="content">
     <li><a href="javascript:;">導航選單1</a></li>

css程式碼：

#content{}
#content li{
 line-height:30px;
 text-align:center;
 color:#fff;
 display:block;
 background:#333;
 width:100px;
}
#content li a{
 display:block;
 float:right;
 background:#333;
 width:100px;
 color:#fff;
 text-decoration:none;
}
#content li a:hover{
 color:#000;
 background:#fff;
}

a {text-decoration:none; color:#000000; font-size:14px;}   初始狀態

a:hover {text-decoration:none;color:#ff0000; font-size:14px}   激發狀態

分析:
text-decoration:none  沒有下劃線.
color   字型顏色.
font-size  字型大小（可用px.pt 等單位表示）
background-color 字型的背影顏色。
 

結果：

a:hover {
  background:#FFFFFF;
  text-decoration:none;
  color:#0066FF;
  display:block;
}