【ホバーアクション】モバイル端末で誤動作させないCSS【@media (hover: hover)と@media (hover: none)】

SIM

こんにちは、SIMです。今日はモバイル端末の時に誤動作を起こしにくいhoverアクションのCSSを紹介します。

なぜ、こんな設定が必要なのか説明すると、モバイル端末でのhoverアクションは誤動作や気持ち悪い動作の原因になることが多いからです。

ということで、表示がバグらないhover設定の方法を紹介していきます。

hover可能なデバイスのCSS設定（モバイル端末では無効になる）

SIM

まずはモバイル端末以外でしかホバーアクションを起こさせない設定からご紹介します。

つまり、コンピューター環境でしかhoverアクションを起こさせない設定を紹介します。これならモバイル端末で誤動作を絶対に起こしません。

結論からいうと、@media (hover: hover){}の中にいつものhove設定を書きます。@media (hover: hover){}はhoverが可能なデバイス用（要するにコンピューター）の設定です。

SIM

具体的な書き方は下のとおりです。

/* ホバーアクション | hover可能なデバイスの設定 */
@media (hover: hover) {
  .c-button:hover {
    background-color: #47A2FD;
    transition: all .3s;
  }
}

@media (hover: hover){}の中にいつものhoverアクションのCSSを書くイメージです。

SIM

CodePenは下のとおり。動作やコード等をご確認下さい。モバイル端末でホバーアクションしないはずです。

See the Pen Untitled by Satoru Shimizu (@sat-simizu) on CodePen.

hoverできないデバイスのCSS設定（モバイル端末のみで有効になる）

SIM

モバイル端末でアクションしても変化がないのでは少し寂しいので、それを解消する方法も紹介します。

つまり、モバイル端末でのみ有効になる設定を利用します。具体的には@media (hover: none){}を使います。

@media (hover: none){}はhoverできない端末（つまりモバイル端末）でのみ有効になる設定です。

今回紹介する設定は、@media (hover: none){}の中に画面をタップした時のアクションです。

SIM

実際のコードは下のとおり。

/* タップアクション | hoverできないデバイスの設定 */
@media (hover: none) {
  .c-button:active {
    background-color: #47A2FD;
    transition: all .3s;
  }
}

@media (hover: none){}の中に:active{}を書くことで、モバイル端末のボタンをタップしたときにCSSを一瞬変化させることができます。

SIM

そのコードペンは下のとおりで、実際に動作やコードをご確認下さい。

See the Pen Untitled by Satoru Shimizu (@sat-simizu) on CodePen.

上記２つを合わせたベストな設定

SIM

上の２つを合わせたものも最後に紹介します。

下記CodePenで動作とコードをご確認下さい。

See the Pen ホバーアクション@media (hover: hover) to by Satoru Shimizu (@sat-simizu) on CodePen.

SIM

必要箇所のCSSを抜粋したのが下のコードです。

/* ホバーアクション | hover可能なデバイスの設定 */
@media (hover: hover) {
  .c-button:hover {
    background-color: #47A2FD;
    transition: all .3s;
  }
}
/* タップアクション | hoverできないデバイスの設定 */
@media (hover: none) {
  .c-button:active {
    background-color: #47A2FD;
    transition: all .3s;
  }
}

注）上の.c-buttonというのはボタンに付けたclassです。

まとめ

SIM

今回は、hoverアクションをモバイル端末で誤動作させないための設定を紹介しました。

紹介したCSSは、@media (hover: hover) {}と@media (hover: none) {}です。