【CSS】hover active の違い。タブレットに対応させるには？
hoverとは？
hoverとはマウスを要素の上に置いた時の状態のことです。クリックはしていない状態です。
タブレットをご使用の方は ⇒こちらへ
書き方
hoverもactiveも、何もしていない最初の状態
.box {
width: 50px;
height: 50px;
background: rgb(4, 4, 204);
color: #fff;
}幅、高さ、背景色、文字の色を変える
.box:hover{
width: 300px;
height: 150px;
background: whitesmoke;
color: rgb(4, 4, 204);
}マウスをboxの上にのせてみてください。
box hover
参考
CSS 画像をマウスオーバー（ホバー）した時の視覚効果
拡大、縮小、回転などなど
activeとは？
activeとは、クリックし続けている状態です。手を離すと解除されます。
タブレットをご使用の方は ⇒こちらへ
書き方
幅、高さ、背景色、文字の色を変える
.box:active{
width: 300px;
height: 150px;
background: whitesmoke;
color: rgb(4, 4, 204);
}boxをクリックしてみてください。
box active
タブレットに対応させる
タブレットに対応させるには、ontouchstart=""を加えるだけです。
<div class="box" ontouchstart="">box</div>PCの方はケータイでスキャンして確認してください。
box hover
box active
まとめ
- hoverとは、マウスを要素の上に置いた時の状態。
- activeとは、クリックし続けている状態です。手を離すと解除されます。
- タブレットに対応させるには、HTMLにontouchstart=""を加える。
