サポート » 使い方全般 » パソコン上では動作するマウスオーバーとモバイル環境下では機能しない

  • 解決済 takumatsu

    (@takumatsu)


    どのようにご質問するのが良いのかすら困っています。

    失礼ながら、ひとまず、下記の2サイトをパソコンとモバイル環境下でそれぞれ開いてみてください。

    Home

    HOME

    1つ目は、WP公式ディレクトリから無料ダウンロードできるテーマの公式サイトです。そして2つ目が、問題の箇所だけをインストールしたデモサイトです。

    パソコン上で画像をクリックするとマウスオーバーして黒の半透明画像とテキストが現れ、一部のテキストにはリンクが挿入されておりクリックすることができます。

    2つのサイトともパソコン環境下では、動作するのですが、2つ目(下部)のテストサイトのみタブレットやiPhoneなどでは、全く反応しません。

    ソースの差分を探しても違いを見つけることができず困っています。PC上のChrome 検証ツールでは、両方とも機能します。実機でのみ動作しないのです。

    対象方法やこの動作を司っているソースやプログラムなどのご指摘頂けると幸いです。

4件の返信を表示中 - 1 - 4件目 (全4件中)
  • Honda

    (@rocketmartue)

    パソコン上で画像をクリックするとマウスオーバーして黒の半透明画像とテキストが現れ、一部のテキストにはリンクが挿入されておりクリックすることができます。

    画像をクリックではなく、マウスをのせるとリンクが現れますね。

    hoverエフェクトなので、マウスの無いタッチデバイスでは機能しないのではないですか?

    トピック投稿者 takumatsu

    (@takumatsu)

    デモサイトの方は、スマホ上でもタップするとマウスオーバーと同じ動作をするんです。つたない英語でテーマ元に質問しましたが「デバイスがサポートしていないのではないか?」とだけで解決に至りません…

    処理をするタイミングはどこでもいいかと思いますが、以下のスクリプトを追記すれば動くかもしれません…。

    <script type='text/javascript'>
    jQuery(function(){
    	jQuery('.three-column-full-width').click(function(){
    		return true;
    	});
    });
    </script>
    トピック投稿者 takumatsu

    (@takumatsu)

    x743 様

    ありがとうございます、head.phpの</head>直前に置いたら、動きました!
    ありがとうございます。

4件の返信を表示中 - 1 - 4件目 (全4件中)
  • トピック「パソコン上では動作するマウスオーバーとモバイル環境下では機能しない」には新たに返信することはできません。