[css]disabledの:hoverを操作

ちょっとややこしい。

基本形
本題

基本形

button{ color: blue;}
button:hover{ color: red;}
button:disabled{ color: green;}

この並びなら:disabledで指定した内容は:hoverに勝つ。:hoverを後に書くとdisabledでも:hoverが効いてしまう。それはどうなのよってことになる。

この順番で書けない場合はdisabledの:hoverも指定する必要がある。

本題

button{ color: blue;}
button:disabled{ color: green;}
button:hover{ color: red;}
button:disabled:hover{ color: green;}

並びを変えられない場合というのは、例えばこういう場合。

button{ color: blue;}
button:disabled{ color: green;}
@media (pointer: fine) {
    button:hover{ color: red;}
    button:disabled:hover{ color: green;}
}

スマホとかタブレット対策で、カーソルが無いデバイスではカーソルを乗せる概念はない。あるけど。普通に組むとスワイプ時に指を乗せた状態で:hoverが反応して、そのまま解除されなくて気持ち悪かったりする。だから、カーソルがある環境だけ:hoverを付けたいってなるとこういう記述になる。