記事の詳細

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

サンプル

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.
三宅 崇之

三宅 崇之

代表取締役インクループ株式会社
代表取締役。京セラ株式会社 機器研究開発本部に配属後、EV-DO通信プロトコルの開発、北海道洞爺湖サミットにおけるマルチワンセグメントサービスの実証実験用端末の開発、京セラ初のHEMSとなる「ハウスマイルナビィ」の企画・ソフトウェア開発を経て、現在ではインターネット時代におけるWEBサイトの活用・運用に関する企画・提案、セミナー等においてこれまで培ってきたノウハウの提供に力を入れている。

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

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

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

AD

ページ上部へ戻る