any-hover: hover

スマホやタブレットなどタップで操作をする端末では、下記のようなデメリットがあるためhover処理を無効にする。

• タップデバイスでhoverアクションを用いると、タップ後にhover状態が継続し、UIの予期しない振る舞いやユーザー体験の混乱を招く可能性がある
• デバイスによってはhoverが指定されている要素はダブルタップしないと反応しない可能性がある

タップデバイスを判定するにはメディア特性のany-hover: hoverを使用する。昨今は小さいノートパソコンや大きいスマホなどがあるので、画面幅で判定するのは適切ではない。

/* transition-propertyの値はアニメーションで動くものだけに絞る */
.button {
  transition: background-color 0.3s;
}

/* Good */
@media (any-hover: hover) {
  .button:hover {
    background-color: red;
  }
}

/* Bad */
@media (min-width: 768px) {
  .button:hover {
    background-color: red;
  }
}

@media (any-hover: hover): 入力デバイスのいずれかにhoverに対応している入力デバイスが含まれる場合に適用する。