子要素のhoverIntentが起動したときに、親要素のhoverIntentを取り消すにはどうすればよいですか？

Question

私は親要素を持っています。私はまた、上に置かれたときに別の要素を示す子要素を持っています。

子どもの上にマウスを置いて、関連する要素のみを表示したい場合、親要素のホバーオーバーを抑制するために、同時に両方を同時に放りたいとは限りません。

これを確実に動作させるには問題があります。おそらく何かが明らかに欠けているでしょう。何か案は？

編集 - 明確化：

この場合の「親」と「子」はお互いを知らない独立した再利用可能なコンポーネントですので、私は実際には1からコンテキストを注入することはできません

これは、jQuery & hoverIntentプラグインを使用して設定したデモです。

HTML：

<div id="parentBar"> 
    <ul id="childMenu"> 
     <li>Menu 1</li> 
    </ul> 
</div> 

<div id="barInfo"> 
    <p>This is shown when hovering overing inside of the parent bar.</p> 
</div> 

<div id="menuInfo"> 
    <p>This is shown when hovering over inside of the child menu.</p> 
</div> 

CSS：

#parentBar{width:500px;border:solid 1px black;} 
#childMenu{margin-left:10px;padding-left:10px;width:100px;border:solid 1px green;} 
#menuInfo, #barInfo{display:none;} 

はJavaScript：

$('#parentBar').hoverIntent({ 
    //interval: 500, 
    over: function(e) { 
     $('#barInfo').show(); 
    }, 
    out: function(e) { 
     $('#barInfo').hide(); 
    } 
}); 

$('#childMenu').hoverIntent({ 
    //interval: 250, 
    over: function(e) { 
     $('#menuInfo').show(); 
    }, 
    out: function(e) { 
     $('#menuInfo').hide(); 
    } 
}); 

$('#childMenu').bind('mouseenter', function(e){ 
    e.stopPropagation(); 
}); 

あなたがjsFiddleにここでそれを見ることができます。子イベントでhttp://jsfiddle.net/hNqQ7/1

Answer 1

var flag = false; 
$('#parentBar').hoverIntent({ 
    interval: 500, 
    over: function(e) { 
    if(!flag) { 
     $('#barInfo').show(); 
    } 
    }, 
    out: function(e) { 
    $('#barInfo').hide(); 
    } 
}); 

$('#childMenu').hoverIntent({ 
    interval: 250, 
    over: function(e) { 
    $('#menuInfo').show(); 
    }, 
    out: function(e) { 
    $('#menuInfo').hide(); 
    } 
}).mouseenter(function(){ 
    flag= true; 
}).mouseleave(function(){ 
    flag = false; 
}); 

Answer 2

（両方機能） 、電話e.stopPropagation()

編集： 申し訳ありません、私は前回のデモを見ていませんでした。あなたは、次の子コードを変更することができます。

$('#childMenu').hoverIntent({ 
    interval: 250, 
    over: function(e) { 
     $('#barInfo').hide(); 
     $('#menuInfo').show(); 
    }, 
    out: function(e) { 
     $('#barInfo').show(); 
     $('#menuInfo').hide(); 
    } 
}); 

Answer 3

このソリューションは、コアプラグインを変更します。

hoverIntentの最新バージョンhttps://github.com/briancherne/jquery-hoverIntentを使用して、私はコア機能に簡単な変更を加えましたは、とmouseenterからトリガーされました。

検索（〜65行目）：

if (Math.sqrt((s.pX - cX) * (s.pX - cX) + (s.pY - cY) * (s.pY - cY)) < cfg.sensitivity) { 

そしてと交換してください：

if (!$el.hasClass("preventIntent") && Math.sqrt((s.pX - cX) * (s.pX - cX) + (s.pY - cY) * (s.pY - cY)) < cfg.sensitivity) { 

これは、あなたが子供/別々の相互作用から任意のロジックを作成して、でhoverIntentの "オーバー" 機能を抑制することができますクラスを切り替えるpreventIntent。

例：各ループで：

$(".child-ele").on("mouseenter", function(e) { 
    $(this).closest(".parent-ele").addClass("preventIntent"); 
}).on("mouseleave", function(e) { 
    $(this).closest(".parent-ele").removeClass("preventIntent"); 
}); 

あるいは、コアプラグインは.isのチェック（「ホバー」）を実行する「ignoreChild」オプションの選択、によって改善することができます。これは余分なマウスイベントの必要性を減らすことができますが、それは明らかにホバリングするように制限します。