2012-03-05 3 views
3

からJavaScriptイベントを伝播することはここに私が達成しようとしている何のためjfiddleです:http://jsfiddle.net/fmvmA/は、ツールヒントのようなdivの

私はこの例に直面しています二つの問題があります。どちらもイベントの伝播に関連しています。マウスがコンテナに入ると、divをカーソルの後に置いておきたい。カーソルがコンテナを離れると、次のdivが消えます。これは単純なはずですが、マウスを動かすとdivのちらつきに問題が発生していますが、tooltop divが表示されたらマウスが技術的にコンテナを離れるためです。

さらに、コンテナ内の任意の場所をクリックして、クリックした位置にツールチップdivのコピーを追加できます。例は厄介ですが、ツールチップのdivがマウスと重複しなくなるようにオフセットを設定すると、オフセットが機能することがわかります。

2つの目標を達成するための簡単な方法はありますか?前もって感謝します。

答えて

1

#ghostがコンテナの外側にあるので、ツールチップが表示されたとき、それはマウスアウトをトリガーするので、それがちらつく...内部にそれを移動し、それがすべて設定する必要があります。..

DEMO

HTML:

<div id="container"> 
    <div id="ghost"> 
    Click to drop me! 
    </div> 
</div> 

編集:#ghostもメートルを隠していないコンテナ内にそれを持ったとき、私はバグに気づい外側のコンテナをオーバーライトしているので、#ghostにオフセットを追加したので、カーソルの下に2pxと表示されます。

JS:

$('#container').on('mousemove', function(event) { 
    $('#ghost').css({ 
     left: event.pageX - $('#ghost').width()/2, 
     top: ((event.pageY - $('#ghost').height()/2) + 2) // +2 px is the offset 
    }); 
}); 
+0

オリジナルのデモごとにクリックするだけで追加の方法で迅速な対応のおかげで滞在しました!私があなたの解決策に気付いたことの一つは、コンテナからマウスを離したときにゴーストディビジョンが隠されていないことです。また、コンテナの外側をクリックしてボックスを配置することもできます。何かご意見は? – ThePromoter

+0

@ThePromoter私のDEMOリンクを試しましたか?私の編集の投稿も見てください。 –

+0

これはあなたのソリューションをテストするときに使用したリンクです。マウスをコンテナからゆっくりと動かすと、テキストが一緒になってスムーズになり、divの高さが上がり、マウスが再び内側にくるようになります。私は間違いなくあなたのソリューションがどのように動作するのかを見ていますが、マウスをゴーストの中に直接向けると、それを動作させることができますか?あなたの助けをもう一度ありがとう! – ThePromoter

1

ここで働くデモだ、あなたはビットを配置APPENDを調整する必要があります。私は

http://jsfiddle.net/fmvmA/4/

+0

あなたのソリューションはトリックを行うようです...しかし、ゴーストディビジョンマウスの外に位置するように配置される。ゴーストdivが本質的にclickイベントをコンテナdivに渡して処理するか、あるいは可能性の領域から何かを求めているだけなので、回避策がありますか?ありがとう! – ThePromoter

+0

最初にコンテナにゴーストを追加すると、マウスの下にゴーストがあってもマウスがコンテナをホバリングします。それ以外の場合は、コンテナのmouseleaveをトリガーします。最初に追加する場合は、その時点で何かにクラスを追加する必要があるかもしれません...clcikが起こらない場合、簡単に削除できます – charlietfl

関連する問題