2011-03-12 76 views
0

寫一些CSS的破解,樣式爲:懸停{}有趣的作品,但瀏覽器對待a:hover不同的完整鏈接VS哈希標籤。:懸停{}優先在壁虎

http://inqdrops.com/welcom/

a, a:active, a:visited { color: #765; text-decoration: none;}
:hover { color: #ff5e99; text-decoration:overline; background: #222}

此代碼,徘徊在<a href='http://what.eva/'></a><a href='#whateva'></a>表現不同。它們對於webkit和gecko也不同。

有人可以解釋發生了什麼?

-
編輯的說明ON SOLUTION

由@babtek答案我指出了正確的方向,而解決辦法是擴大CSS規則:hover, :visited:hover {...}

+4

他們似乎同樣表現給我。你指的是什麼區別? – deceze 2011-03-12 08:14:37

+0

它看起來像你想要的那樣工作,我也在Opera中測試它。 – sarcastyx 2011-03-12 10:57:43

+0

啊哈......好的,謝謝你們。我不明白爲什麼它似乎很奇怪,但我沒有考慮足夠的訪問.. 感謝您的注意!現在我應該找到一個更好的方法來做到這一點.. – 2011-03-13 15:00:20

回答

1

我覺得一個:走訪最終比更具體:懸停,因爲它也有標記名......你的「#」鏈接可能不會被標記爲已訪問?

+0

您是對的。這就是爲什麼我認爲它不能正常工作,但它確實如此。哈希雖然得到標記,但我不想要的.. – 2011-03-13 15:01:56

0

爲什麼不;噸您更改在CSS來

a:hover 
+0

因爲這是整個黑客。 將您的鼠標移到窗口區域外面。 – 2011-03-13 15:02:20

0

萬一有人被幹擾,我缺少的是css規則的順序。加上一個僞:僞規則

a, a:active, a:visited {color: #765; text-decoration: none;}
:hover, :visited:hover { color: #ff5e99; text-decoration:overline; background: #222}

感謝FO提示