很多人也許學(xué)會(huì)了怎樣使鏈接文字隨鼠標(biāo)狀態(tài)的改變而改變的做法，這是“css”做出的效果。但也許你只懂得設(shè)置一種狀態(tài)，比如鼠標(biāo)放在文字上方，文字變?yōu)榧t色。如果整個(gè)頁(yè)面都是如此的“統(tǒng)一”，是不是很枯燥呢？有沒(méi)辦法在一個(gè)頁(yè)面中有多種文字鏈接的效果呢？比如頁(yè)面中有兩個(gè)文字鏈接，我們想其中一個(gè)當(dāng)鼠標(biāo)放上去的時(shí)候是紅色，另一個(gè)則是藍(lán)色的。
答案是肯定的，如果手寫代碼，也只是幾行而已，但考慮到現(xiàn)在大多數(shù)人都在使用Dreamweaver，下面我們以Dreamweaver MX為工具，談?wù)勅绾巫鲞@種效果。
1.在DreamweaverMX中，打開你要做多種鏈接效果的頁(yè)面。
2.打開“css styles（CSS 樣式）”面板，新建一個(gè)CSS樣式，設(shè)置如下圖：
需要注意的是，你選擇“Use css selector（使用CSS選擇器）”再選擇“a:hover（鏈接翻轉(zhuǎn)）”，并沒(méi)有出現(xiàn)上圖的效果，其實(shí)技巧就是在這里！我們手動(dòng)把“a:hove”改成“a.one:hove”，也就是在“a”的后面加上一個(gè)“.”與名字（可是任意英文或數(shù)字）。設(shè)置好后點(diǎn)“OK（確定）”。
3.在彈出的“style definition for a.one:hover（a.one:hover的CSS樣式定義）”對(duì)話框中設(shè)置你要的效果，這里我們選擇文字的顏色為紅色。設(shè)置完后點(diǎn)“OK（確定）”。
4.重復(fù)第2、3步，第2步需要修改的地方是把“a.one:hover”改為“a.two:hover”（這回“.”后的名字不要與“one”相同）。第3步需要改的就是字體的顏色了，我們?cè)O(shè)置為藍(lán)色。
5.現(xiàn)在預(yù)覽還沒(méi)有效果，我們還需看看設(shè)置完后的“css styles（CSS 樣式）”控制面板，里面會(huì)出現(xiàn)一個(gè)“one”和一個(gè)“two”。
6.在頁(yè)面中選中其中你想要當(dāng)鼠標(biāo)放上去的時(shí)候是紅色的鏈接文字，再在“css styles（CSS 樣式）”控制面板中用鼠標(biāo)選中“one”，然后在文檔窗口中選中當(dāng)鼠標(biāo)放上去的時(shí)候是藍(lán)色的鏈接文字，再在“css styles（CSS 樣式）”控制面板中用鼠標(biāo)選中“two”。
7.現(xiàn)在你的頁(yè)面已經(jīng)有兩種效果了。
注意：如果你瀏覽時(shí)只有一個(gè)文字成功或都沒(méi)有成功，請(qǐng)?jiān)诖a視圖下把兩個(gè)文字前的“ class=”one””和“ class=”two””分別剪切到文字前的“<a”后即可。
總結(jié)：按照以上邏輯，我們可以做出無(wú)限個(gè)文字鏈接效果，關(guān)鍵是在于“a:hover”、“a:active”、“a:link”、“a:visited”的修改而已，前面介紹的只是“a:hover”，其他三個(gè)一樣可以。只要參照第2步的設(shè)置就可以輕松的搞定。
