クリックした時や、要素の上にマウスを乗せたときのスタイルを指定できる疑似クラスはとても便利でよく使いますが、今回スマートフォンではスタイルが反映されないという現象に遭遇しました。
しばらくCSSの書き方が間違っているのかと悩みましたが、どうやら関係なかったみたいです。
で、対処法がこちら。
a:active, a:hover {
background-color: red;
}
<a href="[リンク先]" ontouchstart="">リンクはこちら</a>
疑似クラスを指定した要素、今回は、aタグに対して、ontouchstart属性 を追加するだけです。
これを追加することにより、:active と :hover が有効になります。
ちなみに、:active は要素がタップされたとき、ここで指定したスタイルが反映されますが、:hover は、マウスオーバー時ではなく、要素をタップ後、別の要素がタップされるまでの間、指定した要素が反映されます。
参考にさせていただいたサイトはこちらから。
:hoverに設定したCSSがスマホで反応しない時の対処｜ビギナーズハイ
http://beginners-high.com/css-hover/
なお、追加する属性は、ontouchstart 以外にも、ontouchend や ontouchmove でも良いとのこと。
対処法としては以上です！
予想以上に簡単でしたので、同じことでお悩みの方は、是非お試しください。
