a:beforeに
:hoverと
:visited`の条件を書くには?
私はa:before:hover
を試していますが、うまくいきません。
これは、あなたが実際に何をしようとしているかによります。
単に a
要素が疑似クラスにマッチしたときに :before
疑似要素にスタイルを適用したい場合は、代わりに a:hover:before
や a:visited:before
を書く必要があります。疑似要素は疑似クラスの*後に来ることに注意してください(実際、セレクタ全体の一番最後に来ます)。両方とも "pseudo-selectors"と呼ぶと、このような構文問題に遭遇したときに混乱することになります。
もしあなたがCSS3を書いているのであれば、疑似要素をダブルコロンで表して、この区別を明確にすることができます。したがって、a:hover::before
やa:visited::before
となります。しかし、IE8やそれ以前のレガシーブラウザ向けに開発しているのであれば、シングルコロンを使っても問題ありません。
この疑似クラスと疑似要素の具体的な順序は、specに記載されています。
1つの擬似要素は、セレクタ内の最後の単純なセレクタの並びに付加することができる。
単純なセレクタの並び とは、コンビネータで区切られていない単純なセレクタの連鎖のことです。これは常に型セレクタまたはユニバーサルセレクタで始まります。シーケンスの中に他のタイプセレクタやユニバーサルセレクタを入れることはできません。
単純なセレクタ*とは、型セレクタ、ユニバーサルセレクタ、属性セレクタ、クラスセレクタ、IDセレクタ、擬似クラスのいずれかです。
擬似クラスは、単純なセレクタです。しかし、疑似要素は、単純なセレクタに似ていても、そうではありません。
しかし、:hover
1のようなユーザーアクションの擬似クラスでは、ユーザーが a
要素ではなく、擬似要素自体と対話したときにのみ*この効果を適用する必要がある場合、これはレイアウトに依存した不明瞭な回避策以外には不可能です。本文で示唆されているように、標準的なCSSの擬似要素は、現在のところ擬似クラスを持つことができません。その場合には、:hover
を擬似要素ではなく実際の子要素に適用する必要があります。
1 もちろん、疑似要素はリンクではないので、質問にあるような:visited
などのリンク疑似クラスには適用されません</sub>。
a::before:hoverではなく、
a:hover::before`と書いてください。[例](
マウスオーバーでメニューリンクのテキストを変更する。(マウスオーバー時に異なる言語のテキストを表示) ここでは
[jsfiddleの例][1].
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:"ಕನ್ನಡ";
}