マウスオーバー時の処理として簡単に透過の演出ができるので、
リンクのa要素にopacity
をよく使う。
例えば下記のような感じ。
a:hover img { opacity:.6; }
こうすると
リンクのついたimg要素にマウスオーバーすると60%透過になる。
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日現在の最新版
・iPhone5s
・iOS8.4.1
・iOS版 Safari
・iOS版 Chrome
2015年8月19日現在の最新版
これに気づくまで2時間ほど。。。