通常、CSSで :hover スタイルを設定するとスマホでも有効になってしまい、
タップしたときにホバースタイルが有効になりつづけてしまう問題があります。
メディアクエリでPCサイズのみ効くようにすることもできますが、
ピクセルではなく以下のように書くことでホバー可能なデバイスのみホバーのスタイルを有効にすることができます。@media (hover: hover) {
a:hover {
opacity: 0.7;
}
}
また、:any-link をつけることで href 属性の中身がある場合のみホバーを有効にすることができます。
@media (hover: hover) {
a:any-link:hover {
opacity: 0.7;
}
}
●参考
