
こんにちは!WEBデザイナーのこたです。
近年スマホファーストにより、PCよりもスマホのデザインに力を入れている Webサイトが増えていると思います。
今まではPCの設定でリンク設定(ホバー)などをしていたと思いますが、スマホも設定できるのをご存知ですか?
今回はスマートフォンのリンクをタップしたときの背景を消したり、色を変える方法を紹介します!
スマホでのhover"背景色"設定方法
スマートフォン(iPhone,Andoroid)では、リンクをタップしたときに:hoverセレクタや:activeの状態に遅れて切り替わるため、思った通りに動作しない場合があります。
その代わりに、スマートフォンではリオン句をタップした瞬間に、リンクのテキストがハイライトするにようになっています。
-webkit-tap-highlight-color: rgba(赤,緑,青,透明度);
「-webkit-tap-highlight-color」プロパティを使うと、この背景色を変えたり、非表示にすることができます。
このプロパティの値は「rgba(赤,緑,青,透明度)」で指定します。
今回は背景色を黄色に変更してみます。
なお、このプロパティは「:hover」セレクタではなく、通常の「a」や「a:link」セレクタのスタイルに組み込んでおく必要があります。
See the Pen
Untitled by こた@WEBデザイナー (@kota_webdesign)
on CodePen.