記事の詳細
《CSS》マウスオーバーした時にボタンの色と文字を入れ替える方法
ボタンにマウスを乗せた(マウスオーバー)時にボタンの色が変わるようにスタイルシートを書くことができますが、ついでに文字も変更してしまう方法を紹介します。
今回のブログの見出しはコチラです!
CSS3で定義されたnth-child() 疑似クラスを活用
サンプルは以下のCSSとHTMLで実現できます。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 |
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <style type="text/css"> <!-- .button span { display: inline-block; position: absolute; width: 200px; height: 60px; border: 2px solid #333; text-align: center; line-height: 60px; } .button span:nth-child(1) { background-color: #fff; color: #333; } .button span:nth-child(2) { background-color: #333; color: #fff; } .button:hover span:nth-child(2) { display: none; } --> </style> </head> <body> <a class="button" href="#"><span>ボタン</span><span>Button</span></a> </body> </html> |
ボタンに関してはわずか一行
ボタンと表示する文字列は以下の1行で書くことができます。
1 |
<a class="button" href="#"><span>ボタン</span><span>Button</span></a> |
nth-child() 疑似クラスで指定
スタイルシートに関する部分です。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
.button span { display: inline-block; position: absolute; width: 200px; height: 60px; border: 2px solid #333; text-align: center; line-height: 60px; } .button span:nth-child(1) { background-color: #fff; color: #333; } .button span:nth-child(2) { background-color: #333; color: #fff; } .button:hover span:nth-child(2) { display: none; } |
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がとてもシンプルに書けるようになっています。
ぜひお試しください!
コメント
この記事へのトラックバックはありません。
この記事へのコメントはありません。