0

この問題を解決する方法を知る必要があります。リストにmouseleaveイベントがあります。

jQuery(".list").live("mouseleave", function(event) {

    alert("Boom");

});

しかし同時に、ツールチップが表示されています。このツールチップはこのリストに属していません。他のdivにあります。

さて、そのdivの上にマウスを移動すると、アラートが表示されます-リストを離れました。

このツールチップでマウスを動かすと、何のアクションも起こらないので、どうすればよいか教えてください。

私はこの文を試しましたが、うまくいきません：

if($(event.target).hasClass('name')) alert("D");
4

3 に答える 3

1

ここにあなたの問題に対する実用的な解決策があります：http：//jsfiddle.net/SVzv5/8/

この例では、赤い四角がリストで、青い四角がツールチップです。jsfiddleでそれらと対話して、それらが機能していることを確認します。

HTMLコード：

<div id="under"></div>
<div id="over"></div>

jQueryコード：

$('#under').bind('mouseover', function () {
    $(this).css({background:'yellow'});
}).bind('mouseout', function () {
    $(this).css({background:'red'});
});

CSSコード：

#under {
    position:absolute;
    width:200px;
    height:200px;
    top:0;
    left:0;
    background:red;
    display:block;
    cursor:pointer;
}
#over {
    position:absolute;
    width:200px;
    height:200px;
    top:100px;
    left:100px;
    background:blue;
    display:block;
    pointer-events: none;
}
于 2012-09-20T21:32:32.350 に答える
0

基本的に、短いタイムアウトでイベントハンドラーを実行し、マウスがツールチップに入った場合はキャンセルする必要があります。これは、次の方法で実現されます。

varタイムアウト;

handler = function () { 
    // handler 
};

jQuery('.list').bind('mouseout', function (event) {
    timeout = setTimeout(handler, 250);
});

jQuery('#tooltipId').bind('mouseover', function (event) {
    clearTimeout(timeout);
});
于 2012-09-20T21:31:32.093 に答える
0

relatedTargetイベントのプロパティを使用できますmouseleave。これには、イベントが発生したときにマウスが置かれていた要素のオブジェクトが含まれていますmouseleave。

jQuery('.list').bind('mouseleave', function(event) {
  if(jQuery(event.relatedTarget).attr('id') != 'yourToolTipId') {
    alert("Boom");
  }
});
于 2012-09-20T21:43:47.263 に答える