記事の詳細

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

サンプル

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がとてもシンプルに書けるようになっています。

ぜひお試しください!

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

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

The following two tabs change content below.
三宅 崇之

三宅 崇之

代表取締役インクループ株式会社
弊社代表。元研究所勤めの根っからの理系。通信プロトコルの標準化をしていたと思ったらWEB業界に転身することに。好きな言葉は「利他の心」。嫌いな食べ物は「ナマモノ全部」。

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

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

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

仕事ではパソコンが使いこなせるのが当たり前

相模原市産業会館パソコン教室

AD

ページ上部へ戻る