【CSS】hover active の違い。タブレットに対応させるには？

投稿日 : 2022年01月13日 更新日 :

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);
  }

参考

CSS 画像をマウスオーバー（ホバー）した時の視覚効果 拡大、縮小、回転などなど

activeとは？

書き方

幅、高さ、背景色、文字の色を変える

  .box:active{
    width: 300px;
    height: 150px;
    background: whitesmoke;
    color: rgb(4, 4, 204);
  }

タブレットに対応させる

  <div class="box" ontouchstart="">box</div>

まとめ