記事の詳細

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

サンプル

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. この記事へのトラックバックはありません。

特集

エクセルトラブルと解決策のまとめ アクセス数を増加させるための方法まとめ 初心者向けWordPressの設定方法まとめ

AD

お知らせ

平成28年度補正予算 小規模事業者持続化補助金
ページ上部へ戻る