CSS實(shí)例:鼠標(biāo)滑過(guò)文字超級(jí)鏈接背景變色

2024-07-11 09:04:25

字體：大中小

來(lái)源：轉(zhuǎn)載

供稿：網(wǎng)友

武林網(wǎng)(m.survivalescaperooms.com)文章簡(jiǎn)介：CSS實(shí)例:鼠標(biāo)滑過(guò)文字超級(jí)鏈接背景變色.

效果如下圖

CSS實(shí)例:鼠標(biāo)滑過(guò)文字超級(jí)鏈接背景變色

要實(shí)現(xiàn)這個(gè)效果。很簡(jiǎn)單。定義CSS樣式

a:hover{
background:#f29901;
}

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

CSS實(shí)例:鼠標(biāo)滑過(guò)文字超級(jí)鏈接背景變色

顯然，這樣太丑了。

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

即可如效果圖所示，當(dāng)鼠標(biāo)移動(dòng)到超鏈接上的時(shí)候，整個(gè)li元素背景變色。

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

a {
    width:130px;
    /*li元素的寬度，也就是相當(dāng)于定義了一個(gè)寬度范圍，當(dāng)鼠標(biāo)移動(dòng)到上面的范圍的時(shí)候就觸發(fā)a:hover效果*/
}

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

下面附上完整例子代碼：

html代碼：
<ul id="content">
    <li><a href="javascript:;">導(dǎo)航菜單1</a></li>
        <li><a href="javascript:;">導(dǎo)航菜單2</a></li>
        <li><a href="javascript:;">導(dǎo)航菜單3</a></li>
        <li><a href="javascript:;">導(dǎo)航菜單4</a></li>
        <li><a href="javascript:;">導(dǎo)航菜單5</a></li>
        <li><a href="javascript:;">導(dǎo)航菜單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;
}

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

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

下一篇：學(xué)完CSS后該學(xué)什么？