web-dev-qa-db-ja.com

書き方：a：beforeとa：afterのホバー条件は？

:hoverに:visitedとa:before条件を書くにはどうすればいいですか？

a:before:hoverを試していますが、うまくいきません

csscss-selectorspseudo-elementpseudo-class
314
Jitendra Vyas

これは、実際に何をしようとしているかによって異なります。

a要素が擬似クラスと一致するときに、スタイルを:before擬似要素に単に適用したい場合は、代わりにa:hover:beforeまたはa:visited:beforeを記述する必要があります。擬似要素は擬似クラスの後に来ることに注意してください（実際、セレクター全体の最後に）。また、これらは2つの異なるものであることに注意してください。これらの両方を「疑似セレクター」と呼ぶと、このような構文の問題が発生した場合に混乱を招きます。

CSS3を記述している場合、この区別を明確にするために、二重コロンで擬似要素を示すことができます。したがって、a:hover::beforeおよびa:visited::beforeです。ただし、IE8以前のようなレガシーブラウザー用に開発している場合は、単一のコロンを使用しても問題ありません。

擬似クラスと擬似要素のこの特定の順序は、 spec に記載されています。

セレクタ内の単純なセレクタの最後のシーケンスに1つの擬似要素を追加できます。

単純なセレクターのシーケンスは、コンビネーターで区切られていない単純なセレクターのチェーンです。常にタイプセレクターまたはユニバーサルセレクターで始まります。シーケンスでは、他のタイプセレクターまたはユニバーサルセレクターは許可されません。

シンプルセレクターは、タイプセレクター、ユニバーサルセレクター、属性セレクター、クラスセレクター、IDセレクター、または擬似クラスのいずれかです。

擬似クラスは単純なセレクターです。ただし、擬似要素は、単純なセレクターに似ていますが、そうではありません。

ただし、:hoverなどのユーザーアクション擬似クラスの場合1、ユーザーがa要素ではなく擬似要素自体と対話するときに、この効果を適用するためにonlyが必要な場合、これはいくつかのあいまいなレイアウト依存の回避策以外では不可能です。テキストで暗示されているように、標準のCSS擬似要素は現在、擬似クラスを持つことができません。その場合、擬似要素ではなく実際の子要素に:hoverを適用する必要があります。

1もちろん、これは質問の:visitedなどのリンク擬似クラスには適用されません。擬似要素はリンクではないからです。

463
BoltClock

a:hover::before： example の代わりにa::before:hoverを書きます。

91
sandeep

マウスオーバー時にメニューリンクのテキストを変更します。 （ホバーに関するさまざまな言語のテキスト）

jsfiddleの例

html：

<a align="center" href="#"><span>kannada</span></a>

css：

span {
    font-size:12px;
}
a {
    color:green;
}
a:hover span {
    display:none;
}
a:hover:before {
    color:red;
    font-size:24px;
    content:"ಕನ್ನಡ";
}
5
Rao

.card-listing:hover::afterhoverとafterを::を使って試してみる

3
subindas pm

BoltClockの答えは正しいです。私が追加したいのは、疑似要素だけを選択したい場合は、スパンを入れることです。

例えば：

<li><span data-icon='u'></span> List Element </li>

の代わりに：

<li> data-icon='u' List Element</li>

このようにあなたは簡単に言うことができます

ul [data-icon]:hover::before {color: #f7f7f7;}

これは擬似要素のみを強調表示し、li要素全体は強調表示しません

0
bbrinx