位置:首頁 > 軟件操作教程 > UI設(shè)計(jì)軟件 > Adobe Dreamweaver > 問題詳情

實(shí)現(xiàn)鼠標(biāo)懸停變色

提問人:周麗平發(fā)布時(shí)間:2021-05-26

在默認(rèn)情況下,用DreamWeaver設(shè)計(jì)的網(wǎng)頁中的超級鏈接都有下劃線,看上去不大美觀。要去除這些討厭的下劃線,很多報(bào)刊介紹的方法都是在HTML源代碼中手工加入一段代碼,其實(shí)在DreamWeave中很容易去除鏈接的下劃線。首先在DreamWeaver的Document Windows中隨便建立一個(gè)鏈接,你可以看到這個(gè)鏈接會有下劃線。怎樣去除這條下劃線呢?

1.在點(diǎn)擊菜單欄上的"Text"|"CSS Styles"| "Edit Style Sheet…"(或者直接按快捷鍵Ctrl+shift+E),調(diào)出Edit Style Sheet(編輯樣式表)對話框窗口。

2.點(diǎn)擊"New (新建)",然后在"New Style (新樣式)"對話框中,點(diǎn)擊"Use CSS Selector"按鈕。

3.在Selector欄中鍵入a, 然后點(diǎn)OK。

4.隨后彈出"CSS 樣式定義"對話框,在Type類的decoration(裝飾)中,勾選none,然后點(diǎn)OK,再點(diǎn)Done。你將立刻在Document Windows中發(fā)現(xiàn)鏈接的下劃線已經(jīng)消失了。那么又怎樣實(shí)現(xiàn)當(dāng)鼠標(biāo)懸停在鏈接上時(shí)鏈接變色呢?重復(fù)上述步驟中的的第一、第二步。然后點(diǎn)選Selector旁的下拉箭頭,選擇"a:hover",再點(diǎn)OK。在隨后彈出的 "Style definition for a: hover"對話框中,在Type類的color中任意選擇一種顏色(比如選擇紅色),然后點(diǎn)OK,再點(diǎn)Done便完成了。按F12預(yù)覽,將鼠標(biāo)放在鏈接上,該鏈接是不是變成了紅色?如果在剛才的"Style definition for a: hover"對話框中,在Backgroud(背景)類里,選擇backgroud的顏色為綠色,那么當(dāng)你把鼠標(biāo)放在超級鏈接上時(shí),不但鏈接會變成紅色,而且還會有綠色的背景。事實(shí)上,通過剛才的CSS 樣式定義對話框,你還可以實(shí)現(xiàn)更多的特殊效果,有興趣的朋友不妨去好好琢磨一下。

繼續(xù)查找其他問題的答案?

回復(fù)(0)