dw怎么制作鼠標(biāo)經(jīng)過圖標(biāo)改變顏色?
我要評(píng)論Dreamweaver設(shè)計(jì)網(wǎng)頁(yè)的時(shí)候，會(huì)插入各種圖標(biāo)，想要制作一個(gè)鼠標(biāo)經(jīng)過圖標(biāo)時(shí)圖標(biāo)改變顏色的效果，該怎么制作呢？下面我們就來(lái)看看詳細(xì)的教程。
Adobe Dreamweaver CC 2018 64位 官方版
- 類型：網(wǎng)頁(yè)設(shè)計(jì)
- 大?。?/span>600MB
- 語(yǔ)言：多國(guó)語(yǔ)言
- 時(shí)間：2017-10-30
1、準(zhǔn)備好一對(duì)圖標(biāo)，大小相同，顏色不同。
2、然后在body文檔中，插入第一場(chǎng)圖片，代碼是<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)改變顏色的教程，希望大家喜歡，請(qǐng)繼續(xù)關(guān)注腳本之家。
相關(guān)推薦：
DW怎么制作鼠標(biāo)經(jīng)過圖片漸漸變暗效果?
Dreamweaver怎么制作鼠標(biāo)點(diǎn)擊隱藏事件?
dreamweaver怎么制作鼠標(biāo)經(jīng)過圖片變換的效果?
相關(guān)文章
Dreamweaver怎么制作虛線表格？Dreamweaver制作的表格是實(shí)線邊框的，想要制作虛線邊框，該怎么制作呢？下面我們就來(lái)看看詳細(xì)的教程，需要的朋友可以參考下2018-08-23
Dreamweaver怎么添加windows字體？Dreamweaver設(shè)計(jì)網(wǎng)頁(yè)的時(shí)候，想要添加windows系統(tǒng)中的字體，該怎么添加呢？下面我們就來(lái)看看詳細(xì)的教程，需要的朋友可以參考下2018-08-09
Dreamweaver中CSS怎么制作徑向圓形漸變？Dreamweaver中可以利用DIV+CSS制作圓形漸變效果，今天我們就來(lái)介紹五種簡(jiǎn)單的制作方法，需要的朋友可以參考下2018-08-01
Dreamweaver圖片的亮度和對(duì)比度怎么設(shè)置?
Dreamweaver圖片的亮度和對(duì)比度怎么設(shè)置？dw cs6中插入的圖片想要簡(jiǎn)單的調(diào)節(jié)亮度和對(duì)比度，該怎么調(diào)節(jié)呢？下面我們就來(lái)看看詳細(xì)的教程，需要的朋友可以參考下2018-07-31
Dreamweaver怎么設(shè)置div的背景顏色？dw cs6中想要設(shè)置div標(biāo)簽的背景顏色，該怎么設(shè)置呢？下面我們就來(lái)看看詳細(xì)的教程，需要的朋友可以參考下2018-07-25
Dreamweaver中div標(biāo)簽怎么設(shè)置左右并排?
Dreamweaver中div標(biāo)簽怎么設(shè)置左右并排？Dreamweaver中div標(biāo)簽?zāi)J(rèn)是上下并排的，想要設(shè)置成左右并排，該怎么設(shè)置呢？下面我們就來(lái)看看詳細(xì)的教程，需要的朋友可以參考下2018-07-17
Dreamweaver2018怎么插入項(xiàng)目列表?
Dreamweaver2018項(xiàng)目列表怎么使用？Dreamweaver中的文本想要添加項(xiàng)目列表，看上去條理分明，該怎么添加項(xiàng)目列表呢？下面我們就來(lái)看看詳細(xì)的教程，需要的朋友可以參考下2018-07-06
Dreamweaver2018怎么快速插入按鈕？dw2018需要按鈕，該怎么快速插入按鈕，節(jié)省自己制作的時(shí)間呢？下面我們就來(lái)看看詳細(xì)的教程，需要的朋友可以參考下2018-07-06
Dreamweaver2018怎么快速插入文本框？dw2018制作網(wǎng)頁(yè)的時(shí)候，想要插入文本框，該怎么插入文本框呢？下面我們就來(lái)看看詳細(xì)的教程，需要的朋友可以參考下2018-07-06
Dreamweaver主次瀏覽器怎么設(shè)置？Dreamweaver設(shè)計(jì)的網(wǎng)頁(yè)需要預(yù)覽，這時(shí)候就可以設(shè)置瀏覽器種類，該怎么設(shè)置主次瀏覽器呢？下面我們就來(lái)看看詳細(xì)的教程，需要的朋友可以參考2018-06-28
