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

4

3 に答える 3

2 
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;
});
于 2011-05-25T19:31:50.340 に答える
1

子イベント（両方の関数）で、e.stopPropagation（）を呼び出します

編集：わかりました、申し訳ありませんが、私は以前にデモを見ていませんでした。子コードを次のように変更できます。

$('#childMenu').hoverIntent({
   interval: 250,
   over: function(e) {
        $('#barInfo').hide();
        $('#menuInfo').show();
    },
    out: function(e) {
        $('#barInfo').show();
        $('#menuInfo').hide();
    }
});
于 2011-05-25T19:08:04.313 に答える