DIV 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代碼：
<ul id="content">
     <li><a href="javascript:;">導航菜單1</a></li>
        <li><a href="javascript:;">導航菜單2</a></li>
        <li><a href="javascript:;">導航菜單3</a></li>
        <li><a href="javascript:;">導航菜單4</a></li>
        <li><a href="javascript:;">導航菜單5</a></li>
        <li><a href="javascript:;">導航菜單6</a></li>
</ul>

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


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