Dreamweaver設計網頁的時候，會插入各種圖示，想要製作一個滑鼠經過圖示時圖示改變顏色的效果，該怎麼製作呢？下面我們就來看看詳細的教程。
1、準備好一對圖示，大小相同，顏色不同。
2、然後在body文件中，插入第一場圖片，程式碼是<li><img src="img/ad_01.png" alt=""></li>
3、插入第一張圖片後，在下方插入和他顏色不同的另一張圖片，採用同級的關係
4、對他們的父集ul新增定位position:relative;並對第一張圖片設定絕對定位，ul li:nth-child(1){position:absolute;left:0;top:0;}位置方面可以按照自己需要調整
5、對第二張圖片處理方法相同，也是絕對定位，位置和第一張圖片相同，這樣定位後，後面的第二張圖片會覆蓋在第一張圖片的上方
ul li:nth-child(2){position:absolute;left:0px;top:0;}
6、在開始前將第二張圖片設定為隱藏display:none;當滑鼠經過時顯示第二張圖片
7、設定完對第二張圖片的隱藏後，設定當滑鼠經過ul時，第二張圖片顯示ul:hover li:nth-child(2){display:block;}
以上就是dw製作滑鼠經過圖示圖示改變顏色的教程，