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

公開日:2022/09/18

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

こういった動的な表現もCSSのみで実現できます。

サンプルコード

html

<a href="xxx" data-hover-text= "リンクの文字列を変える" class="switch_text">マウスオーバーしたときに</a>

aタグの設置例です。「switch_text」クラスを設定しています。

「data-hover-text」属性にマウスオーバーしたときに切り替えたい文字列を設定します。

CSS

.switch_text {
    display: inline-block;
    position: relative;
    color: #000;
    transition: 0.5s;
}
.switch_text::before {
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    color: transparent;
    text-align: center;
    text-decoration: underline;
    white-space: nowrap;
    transition: 0.5s;
    content: attr(data-hover-text);
}
.switch_text:hover {
    color: transparent;
}
.switch_text:hover::before {
    color: #000;
}

マウスオーバー時の文字列は「switch_text」クラスのbefore疑似要素で表示します。

非マウスオーバー状態のときは「color: transparent;」で文字色を透明にして非表示にしておき、マウスオーバーされたときに文字色をつけます。
逆に、マウスオーバーされたときには元々表示していた「switch_text」クラスの文字色を透過しています。

「switch_text」とbefore疑似要素には「transition: 0.5s;」を設定して、マウスオーバー時に文字がフワッと切り替わるようにしています。

ご質問など受け付けています

記事の中でわかりにくかったところ、もっと知りたかったこと、間違っていることなど、何でもお気軽にご連絡ください。

ご連絡は下記フォームを利用いただくか、ツイッターアカウント@flat8migi宛てでもOKです。