[css] 疑似要素でもhover対応できるよ

Pocket
LINEで送る
GREE にシェア
LinkedIn にシェア

おはようございます。いつもブログ記事は朝書いているので、寝ぼけたままな状態の時も多いのですが、最近は朝散歩をするようにして、今朝は汗だく汁だく状態で書いています。
 

散歩中に、「今日は何を書こうかな〜〜〜」と考えながら、PODCASTを聞いたり、近所の風景でネタ探しをしているのが、なんだかとっても幸せな気分になります。
 

そして大体が、今やっている仕事の技術ネタを書くことになってしまうんですが、cssの疑似要素にクリックイベントがセットできたらいいな〜って考えていたんですが、javascriptからはどうやっても擬似要素にはアタッチできないという事もリファレンスページから理解することができました。
 

他のサイトでもjavascriptで疑似要素を作ったり、コントロールしたりする方法がいくつか書かれていましたが、「疑似要素はDOMではない」ということから、裏技的な扱いしかないのが非常に残念でした。

疑似要素の理解

javascriptで、疑似要素のcontent内容を取得する方法は以下のページに書かれていました。
 

http://ithat.me/2016/09/29/js-jquery-pseudo-element-property-get-and-set
 

“getComputedStyle”関数でエレメントを選択してcss記述を拾うことができるようですね。
細かい話ですが、IEは別のソースにしないといけないかも・・・
 

他のページには、classやdata属性をjavascriptで可変にすることで疑似要素のcssコードを変更したり、アニメーションさせたりする方法が記述しているページがほとんどだったので、やはりjavascriptと疑似要素との相性はあまり良くないということが理解できます。

hoverは普通に対応できる

クリックイベントはできないけれど、cssのhoverには疑似要素は対応しているようです。
 

 

ただし、これはDOM要素部分のhoverに対して疑似要素をセットすることができるということで、実際にサンプルコードを実行すると、疑似要素部分の文字列をhoverアクションで色変更するようにしています。
 

See the Pen
js-pseudo
by YugetaKoji (@geta1972)
on CodePen.


 

注意点としては、
“#elm:hover:before”が、”#elm:before:hover”となっていては、全く動作しません。あくまでhoverした状態のbeforeという扱いです。

attrは使えるのか?

色々調べていて気がついたんですが、疑似要素にはattrという機能があり、content部分に、疑似要素の元になるDOMの要素をインスタンスで持ってくることができるようです。
 

https://developer.mozilla.org/ja/docs/Web/CSS/attr
 

リファレンスページの「構文」の箇所を見ると、非常に沢山のattributeに対応していることがわかります。
 

文字列を動的に取得したければ、data属性と連動するのがいいかもしれませんね。
 

文字列を移行するだけなので、あまり使う事はないかもしれないと思うんだが、どういう使い方が適しているんだろ???

Leave a Reply

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です