【CSS】まだホバー時のスタイルを :hover だけで指定してるの？

はじめに結論から ホバースタイルは、 :hover だけで指定するのではなく、次のように指定しましょう！ @media (hover: hover) { /* リンクの場合 */ a:any-link:hover { } /* ボタンの場合 */ button:enabled:hover { } /* 特定できない場合 */ .button:where(:any-link, :enabled, summary):hover { } } ポイント 1 マウスのときだけホバースタイルを当てる :hover 擬似クラスで指定したスタイルは、タッチデバイスの場合フォーカス状態で適用されてしまいます。 つまり、タッチしたあとのスタイルがずっとホバースタイルのままになってしまいます。 これは意図と合わないため、マウスで操作しているかどうかを区別してスタイルを当てる必要があります。 マウス（正確には、ホ

[w_bonbon]

記事はいいけどタイトルの書き方は良くないな。

[fa11enprince]

これはCSS周りがダメとしか言いようがないな。なんとかならんのコレ。新しい擬似クラス作ってくれよという感じがある。HTMLまわり、覚えること山盛りすぎやしないか。

[kibitaki]

「そうではないものはここでは考えません」「クリックして動作が起こらないときにはホバースタイルを当てるべきではありません」今の子は本当に恐ろしい。ツールチップとか諸々もRFPも何それ状態かな。

[yarumato]

“:hover 擬似クラスで指定したスタイルは、タッチデバイスの場合フォーカス状態で適用される。つまり、タッチしたあとのスタイルがずっとホバースタイルのままになる。マウスで操作しているかどうかを区別したい”

[suekunhello]

年々学ぶこと実装を求められることが増えてるけど、マークアップまたはスタイルあてる方々たいへんそう。ただただリソースの無駄に思うけど、求められてるのかな？

[qinmu]

《:hover 擬似クラスで指定したスタイルは、タッチデバイスの場合フォーカス状態で適用されてしまいます。つまり、タッチしたあとのスタイルがずっとホバースタイルのままになってしまいます。》

[nelpesica]

[]

[t_f_m]

"（クリック可能な要素がネストされることはないので）" / 現実的には結構転がってる気がする……

[efcl]

Hoverがない場合のHover判定

[khtokage]

バッドノウハウの山みたいになってる。いや整理するのが難しいのは分かるけど……

[aquarickn]

いい記事なんだから煽らないで

[snobsnog]

なんか00年代のCSS hack感ある話だなあ。

[hit-the-light1326]

クライアントの解釈違いが時間とともに露出しちゃったという話ではないだろうか？エンジニアがパターン別に覚えるよりクライアントがデバイス判別して修正すればよい話じゃないの？

[ledsun]

:hover疑似クラスの仕様を考えたときにタッチデバイスがなかったのはしょうがないにしても、いい加減何か考えてほしい。少なくとも、タッチ可能なデバイスを検出させてほしい。

[advancive61]

複雑すぎる。。情報ありがとうございます

[xll]

参考にするブクマ。

[AzuLitchi]

おいおい、何十年前のブログタイトルのパクりだよ

[cl-gaku]

認識はしてたけど回避法あったんや

[strawberryhunter]

:enabled ってあったのか。

[Helfard]

なるほどなー。

[ejointjp]

aタグにhrefなしは、今はOKなのかな？