2011-08-11 26 views
2

私には問題があります。次のツールチップはうまく動作しますが、問題があります。マウスを右に動かすと、カーソルがツールチップよりも速くなり、マウスがホバーします。これにより、分割されたカーソルが隠れて表示されます。jqueryツールチップmouseout mouseover

http://gabibyte.zxq.net/jquery_tooltips/example.html 
// !REMEMBER TO INCLUDE JQUERY IN YOUR PAGE - IF YOU DON'T KNOW HOW, JUST INCLUDE THE LINE OF CODE BELOW IN THE <HEAD>...</HEAD> PART OF YOUR PAGE 
/* <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.js"></script> */ 
//----------------------------------------------CONFIGURATION 
var offset=15; //Distance between tooltip and cursor 
var fadeInSpeed=600; //Speed of the Fade-IN effect in miliseconds 
var fadeOutSpeed=200; //Speed of the Fade-OUT effect in miliseconds 
var clearQueue = true; //If set to false, if you hover over many elements fast, the events will stack up 
var gotoEnd= true; //If set to false, if you hover over many elements fast, the events will stack up 
//---------------------------------------------GLOBAL VARIABLES 
var mouseX,mouseY; 
$(document).ready(function(){ 
//-----------------------------------------------MOUSE EVENTS 
    $(document).mousemove(function(e){ 
    mouseX=e.pageX+offset; 
    mouseY=e.pageY;+offset 
    $('.floating').css('top',mouseY); 
    $('.floating').css('left',mouseX); 
    }); 
//------------------------------------------------HOVER EVENTS 
$('.hastooltip').hover(function() { 
    var selector ="#"+ $(this).attr('tooltip'); 
    //alert(selector); 
    //$(selector).stop(clearQueue , gotoEnd) 
    $(selector).fadeIn(250,function() {}); 
},function() { 
    var selector ="#"+ $(this).attr('tooltip'); 
    $(selector).fadeOut(fadeOutSpeed,function() {}); 

    } 
); 
}); 

onmouseoutについては、「ホバリングツールボックスは何もしません。fadeOut」と言う方法はありますか?

+0

問題をもう少し詳しく説明できますか?私はあなたが修正しようとしていることを理解していない。 – Charmander

答えて

0
+0

私はmouseoutを持っています [code] var selector = "#" + $(this).attr( 'tooltip'); var selector = "#" + $(this).attr( 'tooltip'); $(セレクタ).fadeOut(fadeOutSpeed、function(){}) – Daniel

+0

私はmouseoutを持っています。 $(セレクタ).fadeOut(fadeOutSpeed、function(){}); ツールチップが上がったときにFadeOutを停止する方法を探しています。 if(セレクタ).is( 'hover')... else ...フェードアウト – Daniel

+0

このリンクは質問に答えるかもしれませんが、ここでは答えの必須部分を含めて参考にしてください。リンクされたページが変更された場合、リンクのみの回答は無効になります。 –

0

あなたがホバーオフに起こるしたいもののため.setTimeout()を使用することができます。その後、タイムアウトをキャンセルするツールチップのホバーを持ってください(.clearTimeout()を使用)。要素上で同じsetTimeout/clearTimeoutが必要で、ツールチップがオフ/オンになるようにして、マウスのいずれかにマウスが戻ってもホバーオフが起こらないようにします。

2秒のタイムアウトがあると、誰かが飛び降りるとタイマーが始まりますが、2秒以内に誰かがツールチップに移動している間はキャンセルされます。

+0

これは素晴らしいアイデアです、私はそれを試してみましょう。このようなイベントを自動的に設定する方法はありますか? $(セレクタ).hover(function(){$(this).clearTimeout}) – Daniel

+0

要素に格納することができます。 '$(this)).data( 'timer'、setTimeout(...));'そして次に: 'clearTimeout($(this).data( 'timer'));'しかし、あなたのツールチップでは、タイムアウトをキャンセルできるようにその要素を見つけることができます。あなたのツールチップが要素の中にあるなら、それは簡単です( 'clearTimeout($)this.parent()。data( 'timer'));')。 –

関連する問題