0

リンクのマウスアウトでツールチップを非表示にする必要がありますが、ツールチップでマウスオーバーする場合はそうではありません (両方の親が異なります) 例: 名前またはアバターの友達にカーソルを合わせると、Facebook で表示できます

私はこれを試しますが、FALSEになるたびに

$('a').bind('mouseleave', function () {   
      var i = $('div.tooltip').is('hover');
      if(i===true){
      console.log('cursor over the tooltip, so dont hide');
      }
      else{
      console.log('hide tooltip');
      }   
});

両方の状態を確認するにはどうすればよいですか?

4

2 に答える 2

1

リンクとツールチップの両方を同じ親に配置します。

<div id="parent">
    <a href="link.com">link</a>
    <div id="tooltip">tooltip</div>
</div>

次に、スクリプトで、mouseleave関数を親に配置できます。

$("#parent a").mouseenter(function(){
   $("#tooltip").css("display","block"); //or however you handle this
});
$("#parent").mouseleave(function(){
   $("#tooltip").css("display","none");
});
于 2012-04-09T15:41:41.073 に答える
1

マークアップを変更できない場合は、次のように、時間指定イベントを使用して、マウスがいずれかの要素に入ったときに中止します。

var timer;

$("a, .tooltip").mouseleave(function() {
    timer = setTimeout(doSomething, 10);
}).mouseenter(function() {
    clearTimeout(timer);
});

function doSomething() {
    console.log('hide tooltip');
}

ここにフィドルがあります

于 2012-04-09T15:50:17.440 に答える