1

シンプルなホバー プレビュー効果を作成しようとしています。CSS :hover 疑似クラスを使用して大きな画像を表示し、jQuery .mousemove() を使用してマウス カーソルの位置を追跡しています。大きな画像はホバー時に表示され、マウス カーソルに追従するはずです。

問題は、マウスが「ホバー」しなくなったときに大きな画像が消えないことです。最終的に消える前に、ページ全体で数秒間マウスを追跡します。IE8 では少しうまく機能するようですが、他のブラウザーではそうではありません (IE8 でもポジショニングの問題が発生しますが、それは別の問題です)。

どんな助けでも大歓迎です。

コードは次のとおりです。

4

4 に答える 4

1

マウスが大きな画像の上に置かれないように、オフセットにもう少しパディングを加えてください。このjsFiddleをチェックしてください

 var relX = pageX - parentOffset.left +20;
 var relY = pageY - parentOffset.top+20;
于 2012-08-01T23:03:45.193 に答える
1

ホバー効果がマウスの動きに十分に追いついていないようです。純粋に に依存する代わりに、画像を削除するためのタイムアウト (ある程度の量.. おそらく 500) を持つコールバックと、タイムアウトをリセットするコールバック (ホバーされたオブジェクトのタイムアウトを保存できます) を用意:hoverする必要があります。 image -- コールバックのある画像)。.mouseout.mouseover.data

私はあなたのコードを掘り下げていませんが、ここに私が何を意味するかを説明するための疑似コードがあります

$(".big-img-that-follows-mouse").mouseout(function () {
   var $this = $(this);
   //You can also .hide() or whatever instead of .remove()
   $this.data('timeout', setTimeout(function () { $this.remove(); }), 500));
})
.mouseover(function () {
   if ($(this).data('timer') {
      clearTimeout($(this).data('timer'));
      $(this).removeData('timer');
   }
});
于 2012-08-01T23:04:23.883 に答える
0

HTMLを1つの長い文字列でjsfiddleにダンプするのではなく、フォーマットしたほうがよかったでしょう。

とにかくあなたの問題はあなたの大きな画像があなたのリストの中に入れ子になっているのであなたがそれをホバーしているときあなたはまだあなたの元のアイテムをホバーしているということです。

于 2012-08-01T23:05:22.777 に答える
0

この男がここで何をしたかを見てみましょう。

例: http://cssglobe.com/lab/tooltip/03/ コード: http://cssglobe.com/lab/tooltip/03/main.js

于 2012-08-01T23:02:58.420 に答える