2

画像の上に円を表示する簡単なスクリプトを作成しました。

  1. 円にカーソルを合わせると、ツールチップに展開されます。

    $('div.tooltip').live({mouseenter:function(e){
... animate tooltip open;
},mouseleave:function(e){
... animate tooltip closed;
}});

  2. 開いているツールチップをクリックすると、ライトボックスに詳細情報が表示されます。

    $('div.tooltip').live('click',function(e){
... open related lightbox
});

モバイルデバイスを除いて、すべてが正常に機能します。円をタップしてツールチップを開くと、clickイベントが発生し、イベントが完全にバイパスされmouseenter/mouseexitます。どんなアイデアでも大歓迎です:)ありがとう

4

1 に答える 1

2

タッチ スクリーン デバイスの性質上、ホバー イベントはまったくサポートされません。この点であなたができる最善の方法は、ジェスチャをサポートするjqueryプラグインを使用し、シングルタップおよびダブルタップイベントを使用することです.そうしないと、ツールチップを別の場所に配置して常に表示するか、別のボタンチップをアクティブにします... または、最初のクリックでプレスがアクティブになり、次のクリックで 2 番目の機能がアクティブになるようにすることもできます。

于 2012-06-27T03:17:41.640 に答える