(46) iPhoneでhover時アニメーションするとリンク先に飛ばない

投稿者: | 2018年7月26日

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

1. 問題発生

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

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

2. 対策

(1) その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;
  :
}

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です


日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)