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

2024-07-11 09:04:25

字體：大中小

來源：轉(zhuǎn)載

供稿：網(wǎng)友

武林網(wǎng)(www.companysz.com)文章簡介：CSS實例:鼠標滑過文字超級鏈接背景變色.

效果如下圖

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

要實現(xiàn)這個效果。很簡單。定義CSS樣式

a:hover{
background:#f29901;
}

這段代碼的顯示效果如下圖

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

顯然，這樣太丑了。

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

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

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

a {
    width:130px;
    /*li元素的寬度，也就是相當于定義了一個寬度范圍，當鼠標移動到上面的范圍的時候就觸發(fā)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;
}

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

上一篇：CSS網(wǎng)頁布局的一些常見規(guī)則

下一篇：學完CSS后該學什么？