CSSでマウスオーバーした時に文字色やサイズ、背景色を瞬時に変更させたい！？

文字が大きくなる

マウスオーバー時に文字・背景に変化を!?
初心者向けスタイルシート!!

　昨日に続きCSS(スタイルシート)に関する初級編テクニックを書いて置こうと思います。

1. マウスオーバー時に文字色が変わる
   
   こんにちは
　スタイルシートの書き方
<style>
.button1{
width: 140px; /*※幅*/
font-size: 110%; /*※文字サイズ*/
color: #ff0000; /*※文字色*/
background: lime; /*※背景色*/
display: inline-block; /*※改行しない横並び*/
font-weight: bold; /*※文字の太さ*/
text-align: center; /*※中央揃え*/
}
.button1:hover{ /*※マウスオーバー時*/
color: blue; /*※文字色*/
text-decoration: none; /*※リンク時の下線削除*/
}
</style>

<a href="#" class="button1"><div class="button1">こんにちは</div></a>



2. マウスオーバー時に背景色が変わる
   
   こんにちは
　スタイルシートの書き方
<style>
.button2{
width: 140px; /*※幅*/
font-size: 110%; /*※文字サイズ*/
color: #ff0000; /*※文字色*/
background: lime; /*※背景色*/
display: inline-block; /*※改行しない横並び*/
font-weight: bold; /*※文字の太さ*/
text-align: center; /*※中央揃え*/
}
.button2:hover{ /*※マウスオーバー時*/
background: yellow; /*※背景色*/
text-decoration: none; /*※リンク時の下線削除*/
}
</style>

<a href="#" class="button2"><div class="button2">こんにちは</div></a>



3. マウスオーバー時に背景色が変わり文字サイズ大きくなる
   
   こんにちは
　スタイルシートの書き方
<style>
.button3{
width: 140px; /*※幅*/
font-size: 110%; /*※文字サイズ*/
color: #ff0000; /*※文字色*/
background: lime; /*※背景色*/
display: inline-block; /*※改行しない横並び*/
font-weight: bold; /*※文字の太さ*/
text-align: center; /*※中央揃え*/
}
.button3:hover{ /*※マウスオーバー時*/
width: 170px; /*※幅*/
font-size: 130%; /*※文字サイズ*/
background: yellow; /*※背景色*/
text-decoration: none; /*※リンク時の下線削除*/
}
</style>

<a href="#" class="button3"><div class="button3">こんにちは</div></a>

　※(再編集済み)　スタイルシートをそのままコピー時に「/*※○○*/」も一緒にコピーされてもCSSには影響ありませんのでそのまま貼り付けて確認できますので、アナタのブログの編集画面に貼り付けて確認してみて下さい。