css - a:visited リンクを a:link および a:hover と同じ状態に設定する

Question

私は a:link が 1 つの状態 (青、下線なしなど) で、aa:hover が白であるというアイデアに取り組んでいます。訪問したリンクを と と同じ状態にa:linkしたいa:hover。これは可能ですか？ほとんどの一般的なブラウザでサポートされていますか?

Answer 1

a, a:link, a:hover, a:visited, a:active {text-decoration: none; color: blue;}

すべての CSS 対応ブラウザで動作するはずですが、これは悪い考えです(現在オフライン、Google Cache ) 。

白にするa:hoverには、上記のルールからそれを削除して特別なルールを作成するか、次のように追加します。

a:hover {color: white !important;}

Answer 2

sblundy が指摘するように、それは完全に可能です。ただし、そのようなルールを作成すると、ユーザーが以前にアクセスしたリンクにカーソルを合わせているという視覚的な合図がなくなります。

また、次の順序でルールを指定することを忘れないでください。

a:link { }
a:visited { }
a:hover { }
a:active { }

そうしないと、これらのルールはすべて同じ特異性を持つため、予期しない結果になる可能性があります。順序が重要です。

編集: CSS2 では、疑似クラスを連鎖させることができます。これは、リクエストが作成する [潜在的な] ユーザビリティの問題を修正するために使用できます。

a:visited:hover { }

ただし、この規則が広く支持されているかどうかはわかりません。

Answer 3

CSS リンクをどの順序で配置するかを覚えるために教えられたニーモニックは、"LoVe HAte" です: リンク、訪問済み、ホバー、アクティブ。

そこに :focus を貼り付けることも、通常は悪い考えではありません。

もちろん、セレクターをカンマで並べてリンクのすべての状態を同じに見せる場合は、順序は関係ありません。

Answer 4

タグ (通常および訪問済み) をスタイル設定し、ホバーを個別にスタイル設定する方法を次に示します。

a
{
    color:#6c7492;
    font-weight:bold;
    text-decoration:none;
}
a:hover
{
    border-bottom:1px solid #6c7492;
}

Answer 5

これらの疑似クラスを使用している場合、その理由がわかりません。

a:visited, a:hover {
  ...
}