CSS:hover時のスタイルがあるときのスマホでの挙動

シェア

hover時に色が変わるようにしている要素をスマホで触ると色が変わったままになるので、PCの時だけhover時のスタイルを適用したい

→@media(hover:hover)、@media(hover:none)を使って場合分けする

・PCの場合、hoverは「要素にカーソルを乗せている」
 スマホ(タッチデバイス)の場合、hoverは「要素をタップして違う要素を触るまで」
 そのため、hover時のスタイルが残ったままになり、意図しない状態になることがある
・hoverが効く場合だけにhoverのスタイルが適用されるようにする。
 hoverに対するスタイルの記述を@media(hover: hover){}で囲うことで、hoverが効かないスマホの場合はスタイルが効かないようにできる
・以下は特定のクラスの状態がhover、focus、activeのいずれかである場合、周りに1pxの灰色の実線をつけるCSSのサンプル。スマホの場合に特に装飾が必要なければ、hover: noneの方はいらないかも。

@media (hover: hover) {
  /* 通常(PC)の場合 */
  .test-class:is(:hover, :focus, :active){
    border: solid 1px #cfcfcf;
  }
}
@media (hover: none) {
  /* スマホ等の場合 */
  .test-class:is(:focus, :active){
    border: solid 1px #cfcfcf;
  }
}