【CSS】ホバーで文字を切り替える方法【data属性】

こんにちは、ワタナベです。

今回はホバーした時に文字を切り替える方法の備忘録です。

色々なやり方がありますが、今回は「data属性」を使ったやり方になります。

SAMPLE

See the Pen
Untitled by Akiho (@wcaotdaenpaebne)
on CodePen.

↑のように、「data-hover（赤字部分は任意のものでOK）」にホバーで表示させたい文字列を入れます。
それを、疑似要素で表示させて、ホバー時の文字の切り替えを再現します。

長い文章や文字を改行させたい場合にはあまり向きませんが、短い文字でしたらこれが簡単なのではないかなと思います！

▼THANKS！

 ミギムキ

[CSS ] マウスオーバーしたときにリンク文字列を切り替えたい

https://migi.me/css/mouseover-switch-text/#google_vignette

少し変則的なマウスオーバー表現ですが、デザイン上、ナビゲーションの文字列は英語表記になるがリンク先はわかりやすくしたいといった場合の小技に使えます。 こういった動的な表現もCSSのみで実現できます。 サンプルコード ht

それではまた次回。

ご閲覧ありがとうございました♪