擬似要素(before/after)にhoverをかける書き方を紹介。
えっと、あっという間に終わります。
擬似要素にhoverをかける時の記述方法
まず、afterを使ってみます。
<p>ほぼほぼ</p>p::after {
content: 'ウ〜〜';
}ほぼほぼ
「ウ〜〜」がちゃんと表示できましたね。
擬似要素に指定したテキストの文字色を変える
じゃあ、afterにhoverをかけてみましょう。
<p>ほぼほぼ</p>p::after {
content: 'ウ〜〜';
}
p:hover::after {
color: red;
}ほぼほぼ
※パソコンはマウスカーソルを、スマホの人はクリックしてください。
はい、もうできました。
文字色が変わりましたね。
書き方は、:擬似クラス::擬似要素の順番です。
順番を逆にしてみましょうか。
<p>ほぼほぼ</p>p::after {
content: 'ウ〜〜';
}
p::after:hover{
color: red;
}ほぼほぼ
※パソコンはマウスカーソルを、スマホの人はクリックしてください。
色が変わりませんね。
なぜこの順番なのかはさいごに説明します。
contentの中身を変える
今度は、contentの中身を変えてみましょう。
ついでに文字色も変えてます。
<p>ほぼほぼ</p>p::after {
content: 'ウ〜〜';
}
p:hover::after {
content: 'ぐるんぐるん';
color: red;
}ほぼほぼ
テキストが変わりましたね。
nth-of-typeと擬似要素
次は、nth-of-typeと絡めて擬似要素を使ってみましょう。
<ul>
<li>ほぼほぼ1</li>
<li>ほぼほぼ2</li>
<li>ほぼほぼ3</li>
</ul>ul li:first-of-type::after {
content: 'ウーー';
}- ほぼほぼ1
- ほぼほぼ2
- ほぼほぼ3
1番目のリストにafterを追加しました。
nth-of-typeは擬似クラスです。
ですので、これも::after:nth-of-typeの順番だとうまくいきません。
<ul>
<li>ほぼほぼ1</li>
<li>ほぼほぼ2</li>
<li>ほぼほぼ3</li>
</ul>ul li::after:first-of-type {
content: 'ウーー';
}- ほぼほぼ1
- ほぼほぼ2
- ほぼほぼ3
「ウーー」が出ませんね。
hoverをかける
次は、hoverをかけてみましょうか。
<ul>
<li>ほぼほぼ1</li>
<li>ほぼほぼ2</li>
<li>ほぼほぼ3</li>
</ul>ul li:first-of-type::after {
content: 'ウーー';
}
ul li:first-of-type:hover::after {
color: red;
}- ほぼほぼ1
- ほぼほぼ2
- ほぼほぼ3
※パソコンはマウスカーソルを、スマホの人はクリックしてください。
順番は、:first-of-type:hover::afterです。
または、:hover:first-of-type::afterでも効くみたいです。
一応、ChromeとSafariでは確かめてみました。
<ul>
<li>ほぼほぼ1</li>
<li>ほぼほぼ2</li>
<li>ほぼほぼ3</li>
</ul>ul li:first-of-type::after {
content: 'ウーー';
}
ul li:hover:first-of-type::after {
color: red;
}- ほぼほぼ1
- ほぼほぼ2
- ほぼほぼ3
擬似クラス同士では、順番は特に関係ないようですね。
※ここではfirst-of-typeとhoverが擬似クラス。
なぜ、::擬似要素:擬似要素ではダメなのか？
はい、じつはここが今回のメインです。
なぜ、::after:hoverの順ではダメなんでしょう？
ここがずっと疑問でした。
afterにhoverをかけようとしてるのに。
答えは、擬似要素だからです。
htmlコードの中に擬似要素はありませんよね。
あくまでcssで指定してるのが擬似要素です。
そして、僕らが見ているホームページはhtmlファイルでできています。
つまり、擬似要素は存在しえない。
だから、下の「ウ〜〜」にマウスを乗せても、それは<p>の上に乗せているのであって、擬似要素に乗せてるわけではないのです。
というか、擬似要素をカーソルで触れません。
<p>ほぼほぼ</p>p::after {
content: 'ウ〜〜';
}
p:hover::after {
color: red;
}ほぼほぼ
となると、::after:hoverの順がダメな理由が分かります。
html上に存在しないafterにhoverはかけられないからです。
当然、指定も効かなくなります。
上の例でいうと、あくまで<p>にhoverをかけてるんです。
その証拠に、「ほぼほぼ」にマウスを乗せても「ウ〜〜」の色は変化します。
まとめると僕らがやろうとしてるのは、「<p>にマウスを乗せたら(hover)、「ウ〜〜」の色が変化する」という指定をしているわけです。
んー、こんな説明で分かってもらえましたかね？
僕的にはこれでかなりスッキリしたんですが。
参考サイト
この記事はCSS3をもとに記載しました。
CSS3とは、cssのルールブックみたいなもので、その最新版です。
むずかしめなので、余裕がある時にどうぞ。
まとめ
上記の内容はbeforeにも同じように使えるので、試してみてください。