CSS實例:鼠標滑過文字超級鏈接背景變色

效果如下圖

要實現這個效果。很簡單。 定義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代碼：

• 導航菜單1


• 導航菜單2


• 導航菜單3


• 導航菜單4


• 導航菜單5


• 導航菜單6

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;
}


問題雖然小，但是經過自己研究解決印象更加深刻