html - CSSセレクターa：link：hover

Question

各divの要素の色だけで自分がどこにいるかがわかるように、自分のWebサイトを作成しようとしています。Webサイトは1ページだけであり、クリックしてそのセクションを開くと、jQueryを使用してWebサイトのセクションをスライドアウトします（個別の.htmlを使用するのではありません）。

開いているセクションを表示するために、各セクションのすべてのリンクを、そのセクションを開くテキストと同じ色にします。ただし<a> </a>、サイトに少し色を追加し、視聴者を重要な情報に引き付けるためのリンクではないタグも必要です。このため<a> </a>、実際にはリンクであるタグにのみリンク効果を適用したいのですが...それで私はこれを試しました：

#box1 a{
    color: #68cff2;
}

#box1 a:link:hover{
    color: #ffffff;
    background-color: #68cff2;
}

これは、href = "..."を持つ'の背景色のみを変更するため、background-colorに対して機能しますが<a> </a>、そのようなリンクのフォントの色は変更しません...これを並べ替えますか？

Answer 1

:link疑似クラスは、すべてのリンクではなく、未訪問のリンクにのみ適用されます。同様に説明するためにリンクを訪問したことを忘れないでください。行っていないことに気付いたので、訪問したリンクのセレクターを繰り返す必要があるかもしれません:

#box1 a:link:hover, #box1 a:visited:hover {
    color: #ffffff;
    background-color: #68cff2;
}

(または#box1 a[href]:hover、代わりに詳細情報を使用してください)

<a>ただし、 「サイトに少し色を追加し、視聴者を重要な部分に引き付けるためだけに、リンクではなく、アンカーとしても機能しないものをマークアップするためにタグを使用しないでください。情報の」。それは彼らが設計されたものではありません。<em>よりセマンティックな代替手段はorのようなものになり<strong>ますが、もちろん、斜体または太字のスタイルが必要ない場合は削除する必要があります。

#box1 a, #box1 em {
    font-style: normal;
    color: #68cff2;
}

#box1 a:hover{
    color: #ffffff;
    background-color: #68cff2;
}

残りのすべての要素がリンクであることを基本的に保証できるため、疑似クラス:linkと疑似クラスを指定する必要はありません。:visited<a>

Answer 2

の必要性はありa:link:hover{}ますか? 使ってみてください a:hover {}