
擬似要素(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にも同じように使えるので、試してみてください。