2010-10-20 140 views
1

我正在嘗試使用CSS3文本陰影製作導航和正常使用鏈接的僞鏈接類。CSS文本 - 陰影導航問題

問題是,狀態「a:懸停」是否推翻「a:visited」,所以當在先前訪問過的鏈接上執行鼠標懸停時,它會輸出不同的結果。

如果在CSS中不存在a:訪問狀態,訪問過的鏈接的顏色將變成標準的紫色,我不喜歡它。

看一看網站:www.sayhi.dk

的代碼看起來是這樣的:

HTML

<a class="lnk" href="http://www.twitter.com/sayhidk">@Sayhi.dk</a> 

CSS

a.lnk:link { 
font-size: 12px; 
font-weight: bold; 
font-family: Myriad Pro; 
text-shadow:1px 1px #ffffff; 
color:#7c7565; 
text-decoration:none; 
} 

a.lnk:hover { 
    font-size: 12px; 
    font-weight: bold; 
    font-family: Myriad Pro; 
    text-shadow: 1px 1px #7c7565; 
    color:#ffffff; 
} 

a.lnk:visited { 
    font-size: 12px; 
    font-weight: bold; 
    font-family: Myriad Pro; 
    text-shadow:#ffffff 1px 1px 1px; 
    color:#7c7565; 
    text-decoration:none; 
} 

a.lnk:active { 
    font-size: 12px; 
    font-weight: bold; 
    font-family: Myriad Pro; 
    text-shadow:1px 1px #ffffff; 
    color:#7c7565; 
    text-decoration:none; 
} 

希望你們能幫助我。

回答

2

在您的示例中,在:visited樣式中指定'color'就足夠了。

編輯:解決方法是在a.lnk:hover之前放a.lnk:visited

+0

我試過了,但結果仍然一樣。如果您將鼠標懸停在「電子郵件:[email protected]」鏈接上,則應該顯示該鏈接。 – 2010-10-20 10:09:18

+0

然後,也許把:訪問規則之前:懸停。 – kapa 2010-10-20 10:10:45

+0

你是個很棒的傢伙!爲什麼我沒有想到這個? – 2010-10-20 10:23:11

0

這可能有幫助,但我從來沒有定義:鏈接樣式。我反而定義了一個「a」風格(沒有僞類),風格得到很好的繼承。然後我定義:hover,:active等等。如果我沒有爲特定的風格定義一個風格,那麼可以應用全部「a」風格。

定義a:hover以及a:focus也是一個好習慣。如果你喜歡,他們可以是相同的風格。 The:焦點以有限的方式由iOS和不使用鼠標但使用鍵盤導航的殘障用戶使用。