パソコン上では動作するマウスオーバーとモバイル環境下では機能しない

  • 解決済 takumatsu

    (@takumatsu)


    9年、 1ヶ月前

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

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

    http://demo.themefreesia.com/arise/

    http://crestmbt.xsrv.jp/

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

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

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

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

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

4件の返信を表示中 - 1 - 4件目 (全4件中)
  • モデレーター まーちゅう

    (@rocketmartue)

    9年、 1ヶ月前

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

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

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

    トピック投稿者 takumatsu

    (@takumatsu)

    9年、 1ヶ月前

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

    x743

    (@x743)

    9年、 1ヶ月前

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

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

    (@takumatsu)

    9年、 1ヶ月前

    x743 様

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

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