2012-01-12 5 views
1

スパンを超えているときにdivをマウスポインタに追従させるにはどうすればよいですか?リンク以下divをスパンを越えたときにのみマウスポインタに従う方法

jQuery - Follow the cursor with a DIV

上記のリンクは、div要素がポインタに追従させるために、しかし、どのようにdiv要素が消えるようにする方法と言いますか?

divにすると、ポインタがスパン(またはdiv、または他の可能な要素)の上にある場合にのみ表示されます。

つまり、マウスがスパンを越えると、divがマウスのポインタに続いて表示されます。ポインタはスパンを離れたとき、あなたがフェージング好きなら、divが...、また...

答えて

3

はこれを試してみてください事前に

おかげで...

$("#spanID").hover(function() { 
    $("#divID").show(); 
}, function() { 
    $("#divID").hide(); 
}); 

をdesappearしなければならない

$("#spanID").hover(function() { 
    $("#divID").stop().fadeIn(); 
}, function() { 
    $("#divID").stop().fadeOut(); 
}); 

私はトグルメソッドを使用するつもりでしたが、上記のコードはdivの最初の表示状態を想定していません

+0

まあ、私は上記のコードに追加: $(文書).bind( 'のMouseMove'、機能(E){ $( '#divIdは')、CSS({左:。e.pageX、トップ:E .pageY});}); と私は望んだ結果を得ました。 しかし、ポインタを左から右、または上から下に移動すると、一種の点滅するdivが表示されます。右手から左下に移動すると、それは起こりません。任意のアイデアなぜ? そして同じことが、純粋なJSを使用したときに起こったことです。document.getelementeById( 'divid')。style.visibility = 'visible'(またはhidden ...) –

+0

カーソルがdivの上にあり、スパン上にホバリングが長くなると消えますが、カーソルが再び移動するとスパンを越えてdivが再び現れます。あなたはこれまでjsfiddleなどでこれまでに持っていたものを使ってサンプルページを作ることができますか? – Archer

0
<span onmouseover='$("#divFollower").show()' onmouseout='$("#divFollower").hide()'>Span Contents</span> 
+0

それは動作しますが、私はまた、ポインタの後にdivを移動したいと思います... –

+0

divに供給したリンクを適応させてポインタに従わせることはできませんか?つまり、cssの位置が絶対および左で、上端がマウスのオフセットに設定されている –

関連する問題