▲TOPへ戻る

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

hover acrive
サイト内検索

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
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の方はケータイでスキャンして確認してください。

QRcode
box hover
box active

まとめ

  1. hoverとは、マウスを要素の上に置いた時の状態。
  2. activeとは、クリックし続けている状態です。手を離すと解除されます。
  3. タブレットに対応させるには、HTMLにontouchstart=""を加える。

こんな記事も読まれています。

profile

パソコン好きなガオ

コロナ禍によるステイホームを機にプログラミングを学ぶ。パソコンに関してはプロではないが、ちょっと詳しい程度。<

パソコン

javascript

カメラ

ブログ

サイト内検索👇