浜松のWEBシステム開発・スマートフォンアプリ開発・RTK-GNSS関連の開発はお任せください
株式会社シーポイントラボ
TEL:053-543-9889
営業時間:9:00~18:00(月〜金)
住所:静岡県浜松市中区富塚町1933-1 佐鳴湖パークタウンサウス2F

【CSS】:activeなどの疑似クラスがスマートフォンで効かない時の対処法

クリックした時や、要素の上にマウスを乗せたときのスタイルを指定できる疑似クラスはとても便利でよく使いますが、今回スマートフォンではスタイルが反映されないという現象に遭遇しました。
しばらく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 以外にも、ontouchendontouchmove でも良いとのこと。

 

対処法としては以上です!
予想以上に簡単でしたので、同じことでお悩みの方は、是非お試しください。

  • この記事いいね! (2)