33

iOS のホバー効果を修正したい (タッチ イベントに変更) が、私にはわかりません。これを説明しましょう。ページにテキストがあります:

<div class="mm">hello world</div>

スタイル付き:

.mm { color:#000; padding:15px; }
.mm:hover { background:#ddd; }

わかりました、dekstop でマウスをテキストの上に置くと、#ddd の背景が表示されますね。しかし、iOSでは、テキストに触れても何も得られませんが、タップすると、醜くて粘着性のある #ddd 背景が得られます。 . しかし、freemyappps.com や (このサイトを確認してください -> iOSデバイスでD4Fを確認し、何かをタッチして、ケーキを食べるようなホバー効果を確認してください :)) しかし、これらのサイトはどのようにそれを修正したのでしょうか? どうすればそれらのように修正できますか? ありがとう

4

16 に答える 16

117

iOS にホバー付きの要素として認識させたいものに onclick="" を追加します。

<div onclick="">Click Me!</div>
于 2013-11-18T13:05:46.043 に答える
16

これがパフォーマンスに大きな影響を与えるかどうかはわかりませんが、これは過去に私にとってはうまくいきました：

var mobileHover = function () {
    $('*').on('touchstart', function () {
        $(this).trigger('hover');
    }).on('touchend', function () {
        $(this).trigger('hover');
    });
};

mobileHover();
于 2013-11-11T18:52:08.617 に答える
8

本文に tabIndex 属性を追加します。

<body tabIndex=0 >

これは、Javascript が無効になっている場合にも機能する唯一のソリューションです。

ontouchmovehtml 要素に追加します。

<html lang=en ontouchmove >

例と備考については、次のブログ投稿を参照してください。

iOS13で確認済み。

これらのソリューションには、他の場所をクリックするとホバー状態が消えるという利点があります。また、ソースに余分なコードは必要ありません。

于 2019-11-08T13:40:58.840 に答える
5

これは、私が作成したiosでのjavascriptホバーの基本的な成功した使用法です。

注: jQuery を使用しましたが、うまくいけば問題ありません。

JavaScript:

$(document).ready(function(){
  // Sorry about bad spacing. Also...this is jquery if you didn't notice allready.
  $(".mm").hover(function(){
    //On Hover - Works on ios
    $("p").hide();
  }, function(){
    //Hover Off - Hover off doesn't seem to work on iOS
    $("p").show();
 })
});

CSS:

.mm { color:#000; padding:15px; }

HTML:

<div class="mm">hello world</div>
<p>this will disappear on hover of hello world</p>
于 2013-08-05T13:44:14.767 に答える
4

Dan ( https://stackoverflow.com/a/20048559/4298604 ) に応えて、少し変更されたバージョンをお勧めします。

<div onclick="void(0)">Click Me!</div>

"" ではなく、"void(0)" を追加すると、未定義のプリミティブ値を取得するのに役立ちます。

于 2016-06-23T19:24:46.133 に答える