blog

2015.08.20(Tips)

[CSS]CSSのリンク要素a:hoverにopacityを設定している場合、スマホでは2タップ必要になる?から注意。

css

マウスオーバー時の処理として簡単に透過の演出ができるので、
リンクのa要素にopacity をよく使う。

例えば下記のような感じ。

a:hover img {
	opacity:.6;
}

こうすると
リンクのついたimg要素にマウスオーバーすると60%透過になる。

sample01

PC時には何も問題ないのだが、スマホから閲覧した時にちょっとした不具合があった。

いつからかはわからないが、先日、iOS8.4.1にアップデートした影響だろうか?
テキストリンクなら問題ないが、img要素やblock要素にリンクがあるとき、
どうやら私の環境(iPhone5s・iOS8.4.1)では、1タップめでhover、2タップでactiveになるようだ。

そういう時の対処法。

メディアクエリーを使ってスマホ時だけopacityを戻してあげる。

@media (max-width: 767px) {
a:hover img {
	opacity:1.0;
}

上記では、ブラウザの幅が767px以下の場合、適用してね!という意味になる。

こうすれば1タップで、リンク先へ飛ぶことができる。

検証環境は下記
・iPhone5s
・iOS8.4.1
・iOS版 Safari
・iOS版 Chrome
2015年8月19日現在の最新版
これに気づくまで2時間ほど。。。
- AD -