Dreamweaver設(shè)計(jì)網(wǎng)頁的時(shí)候，會(huì)插入各種圖標(biāo)，想要制作一個(gè)鼠標(biāo)經(jīng)過圖標(biāo)時(shí)圖標(biāo)改變顏色的效果，該怎么制作呢？下面我們就來看看詳細(xì)的教程。

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

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

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

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

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

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

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

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

以上就是dw制作鼠標(biāo)經(jīng)過圖標(biāo)圖標(biāo)改變顏色的教程，