記事の詳細

ボタンにマウスを乗せた(マウスオーバー)時にボタンの色が変わるようにスタイルシートを書くことができますが、ついでに文字も変更してしまう方法を紹介します。

サンプル

CSS3で定義されたnth-child() 疑似クラスを活用

サンプルは以下のCSSとHTMLで実現できます。

ボタンに関してはわずか一行

ボタンと表示する文字列は以下の1行で書くことができます。

nth-child() 疑似クラスで指定

スタイルシートに関する部分です。

display:inline-block、かつposition:absoluteを指定することで、buttonクラスで定義された2つのボタン(ボタンとButton)を重ねて表示しています。後に書かれている「Button」と書いたボタンのほうが後から表示されるので「ボタン」と書かれたボタンを上書きしているような状態となっています。

span:nth-child(1)で「ボタン」と書かれたボタンの文字色と背景色を設定しています。

span:nth-child(2)で「Button」と書かれたボタンの文字色と背景色を設定しています。

そして、マウスオーバーで表示が変わる部分に関してですが、

hoverイベント発生時にspan:nth-child(2)のdisplayをnoneに設定することで、前面のボタンが消え、後ろに隠れていた「ボタン」と書かれたボタンが見えるという仕組みです。

これまでより簡単に実装可能になっています

これまでだと別々のクラスを持つボタンを用意しておき、hover時にdisplayでどちらか一方を消すという方法が必要でしたが、nth-child() 疑似クラスを活用することで、HTMLがとてもシンプルに書けるようになっています。

ぜひお試しください!

この記事であなたの課題を解決することができましたか?

疑問点があったり、解決できなかったことがありましたら、お気軽にご相談してください。


ほかの投稿も読んでみませんか?

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

相模原のお店やサービスをどんどん紹介!

行ってみよう相模原 相模原市のお店限定

飲食店

ページ上部へ戻る