html怎么實(shí)現(xiàn)鼠標(biāo)經(jīng)過(guò)展開(kāi)效果

本篇內(nèi)容主要講解“html怎么實(shí)現(xiàn)鼠標(biāo)經(jīng)過(guò)展開(kāi)效果”，感興趣的朋友不妨來(lái)看看。本文介紹的方法操作簡(jiǎn)單快捷，實(shí)用性強(qiáng)。下面就讓小編來(lái)帶大家學(xué)習(xí)“html怎么實(shí)現(xiàn)鼠標(biāo)經(jīng)過(guò)展開(kāi)效果”吧!

　　分析

　　我們觀察到，當(dāng)鼠標(biāo)懸停在導(dǎo)航欄的項(xiàng)目中，出現(xiàn)從中間向左右展開(kāi)的背景效果；移開(kāi)時(shí)，又從左右向中間收縮?？梢宰龀鋈缦路治觯?/p>

　　文字本身是沒(méi)有展開(kāi)和收縮效果，說(shuō)明文字與背景不是同一個(gè)元素。

　　文字在背景上面顯示，文字元素與背景元素是上下層關(guān)系，也就是存在定位。

　　背景展開(kāi)和收縮有明顯的過(guò)渡效果。

　　實(shí)現(xiàn)

　　根據(jù)以上三點(diǎn)，我們逐個(gè)突破。

　　1. 文本元素與背景元素

　　文本元素

　　首先，文本使用span標(biāo)簽實(shí)現(xiàn)。加上寬高、居中等簡(jiǎn)單樣式。

　　HTML

　　項(xiàng)目

　　CSS

　　span{

　　display: inline-block;

　　width: 100px;

　　height: 30px;

　　line-height: 30px;

　　text-align: center;

　　}

　　背景元素

　　背景本身沒(méi)有具體意義，只是用來(lái)修飾，我們可以使用span偽元素：after實(shí)現(xiàn)（這樣可以減少一個(gè)專門(mén)表示背景的標(biāo)簽）。

　　CSS

　　span:after{

　　content: "";

　　background-color: #f00;

　　}

　　現(xiàn)在只能看到文字，還看不到背景色，因?yàn)楸尘霸貨](méi)有內(nèi)容也沒(méi)有設(shè)置寬高。效果如圖：

　　只能看到文字，背景色沒(méi)有撐開(kāi)

　　2. 在文本元素下面顯示背景元素

　　元素層疊效果一般是父relative子absolute實(shí)現(xiàn)。

　　文本元素

　　span{

　　display: inline-block;

　　width: 100px;

　　height: 30px;

　　line-height: 30px;

　　text-align: center;

　　position: relative;

　　}

　　背景元素

　　span:after{

　　content: "";

　　background-color: #f00;

　　position: absolute;

　　top: 0;

　　bottom: 0;

　　right: 0;

　　left: 0;

　　z-index: -1;

　　}

　　注意：top: 0;bottom: 0;right: 0;left: 0;作用是背景平鋪整個(gè)文本元素。

　　3. 鼠標(biāo)懸停背景元素展開(kāi)

　　背景元素開(kāi)始時(shí)位于水平中間位置，也就是說(shuō)距離左右是文本元素長(zhǎng)度的一半。當(dāng)鼠標(biāo)懸停到文本元素上，背景展開(kāi)。

　　背景元素初始狀態(tài)

　　span:after{

　　content: "";

　　background-color: #f00;

　　position: absolute;

　　top: 0;

　　bottom: 0;

　　right: 50%;

　　left: 50%;

　　z-index: -1;

　　}

　　鼠標(biāo)懸停背景元素展開(kāi)

　　span:hover:after{

　　right: 0;

　　left: 0;

　　}

　　鼠標(biāo)懸停馬上顯示背景色，效果如同span:hover直接改變顏色一致。我們還需要給背景元素加上過(guò)渡。

　　span:after{

　　content: "";

　　background-color: #f00;

　　position: absolute;

　　top: 0;

　　bottom: 0;

　　right: 50%;

　　left: 50%;

　　z-index: -1;

　　transition: 0.3s;

　　}

　　大功告成。

　　完整代碼

　　項(xiàng)目

　　span{

　　display: inline-block;

　　width: 100px;

　　height: 30px;

　　line-height: 30px;

　　text-align: center;

　　position: relative;

　　}

　　span:after{

　　content: "";

　　background-color: #f00;

　　position: absolute;

　　top: 0;

　　bottom: 0;

　　right: 50%;

　　left: 50%;

　　z-index: -1;

　　transition: 0.3s;

　　}

　　span:hover:after{

　　right: 0;

　　left: 0;

　　}

到此，相信大家對(duì)“html怎么實(shí)現(xiàn)鼠標(biāo)經(jīng)過(guò)展開(kāi)效果”有了更深的了解，不妨來(lái)實(shí)際操作一番吧！這里是億速云網(wǎng)站，更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢，關(guān)注我們，繼續(xù)學(xué)習(xí)！