dw如何制作鼠標(biāo)經(jīng)過圖標(biāo)改變顏色

發(fā)布時間：2021-05-17 14:06:05 來源：億速云閱讀：1615 作者：小新欄目：互聯(lián)網(wǎng)科技

這篇文章將為大家詳細講解有關(guān)dw如何制作鼠標(biāo)經(jīng)過圖標(biāo)改變顏色，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。

方法如下

1、準備好一對圖標(biāo)，大小相同，顏色不同。

2、然后在body文檔中，插入第一場圖片，代碼是<li><img src="img/ad_01.png" alt=""></li>

dw如何制作鼠標(biāo)經(jīng)過圖標(biāo)改變顏色

3、插入第一張圖片后，在下方插入和他顏色不同的另一張圖片，采用同級的關(guān)系

dw如何制作鼠標(biāo)經(jīng)過圖標(biāo)改變顏色

4、對他們的父集ul添加定位position:relative;并對第一張圖片設(shè)置絕對定位，ul li:nth-child(1){position:absolute;left:0;top:0;}位置方面可以按照自己需要調(diào)整

dw如何制作鼠標(biāo)經(jīng)過圖標(biāo)改變顏色

5、對第二張圖片處理方法相同，也是絕對定位，位置和第一張圖片相同，這樣定位后，后面的第二張圖片會覆蓋在第一張圖片的上方

ul li:nth-child(2){position:absolute;left:0px;top:0;}

dw如何制作鼠標(biāo)經(jīng)過圖標(biāo)改變顏色

6、在開始前將第二張圖片設(shè)置為隱藏display:none;當(dāng)鼠標(biāo)經(jīng)過時顯示第二張圖片

dw如何制作鼠標(biāo)經(jīng)過圖標(biāo)改變顏色

7、設(shè)置完對第二張圖片的隱藏后，設(shè)置當(dāng)鼠標(biāo)經(jīng)過ul時，第二張圖片顯示ul:hover li:nth-child(2){display:block;}

dw如何制作鼠標(biāo)經(jīng)過圖標(biāo)改變顏色

關(guān)于“dw如何制作鼠標(biāo)經(jīng)過圖標(biāo)改變顏色”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，使各位可以學(xué)到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。

向AI問一下細節(jié)

猜你喜歡