1,495 views

この記事は最終更新から 2873日 が経過しています。

1. 問題発生

リンクバナー上のマウスオーバー時に a:hover で CSSアニメーションさせた。

すると…
iPhone, iPadでのリンクバナー押下時にリンク先に飛ばない。
※Android端末では未確認

2. 対策

(1) その１：アニメをOFF

iPhone, iPadでの閲覧時はアニメーションを機能させなければよい。

JavaScript

$(function(){
  var ua = navigator.userAgent;
  if(/Android|Mobile|iPhone|iPad|iPod/.test(ua)) {
    //
  }else{
    $("body").addClass("no_mobile");
  }
});

CSS

.no_mobile a:hover{
  animation-name: xxxxxxxxxx;
  :
}