2009-08-26 4 views
17

すでにvisitedになっており、マウスでhoverになっているハイパーリンクにのみ、フォントcolorを適用できますか?CSS - a:訪問済み:ホバー?

基本的に、私がやりたいことは可能である

a:visited:hover {color: red} 
+0

これはFFで動作するようですが、IE 6では動作しません。 –

答えて

18

はいです。ここで

は例です:

<style type="text/css"> 
    a:link:hover {background-color:red} 
    a:visited:hover {background-color:blue} 
</style> 

<a href="http://www.google.com/">foo</a><a href="http://invalid/">bar</a> 
+0

すべてのブラウザでサポートされていますか? Firefox 3.5で動作しないようです。 –

+0

FFox 3.5とIE7では動作しますが、IE6では動作しません。 – jimyi

+0

FF 3.5のように見えます。 IE 6のすべての回避策? –

1

を有効にするリンク、CSS間の配列が..です は:リンクと::ホバーは後に来なければならない訪問し、アクティブにした後に来なければなりません。ただcolor(クローム/ FF)a:visited:hoverの背景を宣言せず

http://www.w3schools.com/css/css_pseudo_classes.asp

+1

これは一般的には良いアドバイスですが、この質問には当てはまりません。質問には、要素に適用される他の擬似の順序(または存在)について言及するものは何もありません。「a:visited:hover」は、あなたが答えで言及したセレクタのいずれかより具体的です(そして質問はIE6ではルールが適用されず、他のルールよりも優先されます)。 – Quentin

+0

あなたのコメントを感謝します。私はあなたのコメントを感謝しますが、私が投稿した解決策は、多くの人が直面している最も一般的な問題でも、私はそれを修正した後も同じシーケンス問題に直面していて、他の人が同じ問題に直面しないので投稿しました。 – user3110896

+0

一般的な問題ですが、尋ねられる問題ではありません。 – Quentin

0

FWIWは、私はスタイリングすることができませんでした...]リンクの下に参照してください詳細について を合わせます:link:hovernoneまたはinherit以外のものは機能しそうですが、私はrgba()をアルファベットに使用しています)。これはクローム/ FFに機能するために

a:visited:hover { 
    color: #f00; 
} 

...(のようなもの)これが存在している必要があります

a:link:hover { 
    background-color: rgba(255, 255, 255, 0); 
} 
1

これが正しく動作するためのCSS宣言順があります先に述べたように、この特定のオプションをカバーしていませんが、それは違いを生み出します。私はこれをChromeでテストしました。

注文は

a:link { color: red; } 
    a:visited { color: blue; } 
    a:visited:hover { color: yellow; } 
    a:hover { color: green; } 
    a:active { color: gray; } 

でそれが前か後に来るかどうか動作します:ホバーと::訪問:訪問し、前:アクティブ後にホバーしている限り、両方のようにホバー。私はちょうど2つの訪問されたリンクを一緒にして、2つのホバーを一緒に保つことを好む。

関連する問題