aタグにopacityプロパティを指定する時の注意点:CSS備忘録

aタグの中に入れた画像をマウスオーバー時に透明にする時なんかによく使う(と思う)opacityプロパティ。PCでは別段問題は起こりませんが、スマホサイトの時は注意。iOS8.4.1(~?)のiPhoneでaタグに疑似クラス:hoverでopacityプロパティを指定していると、2回タップしないとリンクが機能してくれなくなります。

対策:スマホサイトではaタグに疑似クラス:hoverをかけない。

まぁスマホサイトではそもそも不要だと思うんですが、レスポンシブデザインのサイトだとかけてしまってる場合も割とあるかなと思うので。MediaQueryでPCだけにかかるようにしておくと安心。

※備忘録タグの投稿は、過去に使用したソースやプログラムをいつでも参照できるようにする為のメモ書きです。間違ってたり現在は非推奨になってる場合があるかもしれません、ご了承ください。