スマホにhover時のスタイル変化を対応させる

スマホでの hover 効果の問題

スマホ（hover未対応端末）でhover擬似クラスを指定した要素をタップすると、他のオブジェクトを触れるまでhoverで指定したスタイルが持続してしまう。

（リンク先に飛んだ後、ブラウザバックするとhoverスタイルがかかったままにななっている）

対応方法

• デバイスがhover対応か否かをメディアクエリで指定できる
  画面サイズ指定だとスマホの横置きに対応できない
  → 画面サイズではなく、hover対応の有無でメディアを指定する

@media (hover: hover) {
	　hover対応メディア（PC）
}

@megia (hover: none) {
	hover非対応メディア(SP）
}

• タップした瞬間は hover と同様のスタイルを適用させたい
  → :active擬似クラスで指定すればOK

&:active {
	〜hover効果〜
}

• 上記の対応をまとめる
  :activeと:hoverは共通のルールセットになるため、筆者は以下のようにまとめている

.c-button {
	〜ボタンのスタイル〜
	
	@mixin hoverOrActive {
		border: 3px solid #00ff00;
		opacity: 0.5;
	}
	
	// hover未対応（SP）は :active に指定
	@media (hover: none) {
		
		&:active {
			@include hoverOrActive;
		}
	}
	
	// hover対応（PC）は :hover に指定
	@media (hover: hover) {
	
		&:hover {
			@include hoverOrActive;
		}
	}
}

参考
CSSのメディアクエリでスマホでのホバーの挙動の対策を行う【hover:hover】