0

ページには 4 つの div があります。

  1. アイテムA
  2. アイテムB
  3. アイテムC
  4. 詳細（非表示）

望ましい効果は、項目ボックスの上にカーソルを置くと詳細ボックスが表示され、マウスアウトすると非表示になることです。詳細ボックスは、表示時にアイテムボックスの右側の約 20% に重なって表示されます。

ただし、現在の誤った効果は、アイテム ボックスの右端にカーソルを合わせると、[詳細] ボックスの表示と非表示の永遠のループに入るということです。おそらくこれは、アイテム ボックスのマウスアウト イベント (詳細が表示されるとき) をトリガーし、詳細ボックスが非表示になるとすぐにマウスオーバー イベントを再度トリガーするためです。これを回避する方法を知りたいです。

私の現在のコードは次のとおりです。

$('div.item').hover(
    function() {
        $(this).showDetails();
    },
    function() {
        $(this).hideDetails();
    }
);

ご指摘ありがとうございます。これは、視覚化できない人のための jsfiddle リンクです。右側の項目ボックスにカーソルを合わせて、マウスを少し動かすと、ちらつきが発生することがわかります。

http://jsfiddle.net/s6CjP/1

ザビエル、私はすでに詳細ボックスにappendToを試しましたが、私が望む効果は、マウスイベントをアクション可能なdiv（つまり、アイテム）のみを対象にしたいということです。詳細ボックスがdivをカバーしているため、いくつかの調査の後、これが可能かどうかはかなり確信しています（したがって、その下にあるものにイベントを添付することはできません）

4

4 に答える 4

1

1 つの回避策は、詳細 DIV をホバーしている項目の子にすることです。こうすることで、ポインタが詳細 DIV の上にあるときでも正しい項目の「中に」あり、マウスが両方の DIV を離れるまでマウスアウトは送信されません。少なくとも 2 つの方法でこれを行うことができます。

  1. 項目 DIV ごとに個別の詳細 DIV を用意します (いずれにしても、すべての詳細が異なりますよね?)。
  2. 詳細 DIV を DOM からヤンクし、showDetails() 関数の正しい項目 DIV に追加します。

思い通りに表示するには CSS をいじる必要がありますが、親子関係がある限り、誤ったマウス イベントについて心配する必要はありません。

お役に立てれば！

于 2011-02-02T01:16:28.307 に答える
0

これを試してください：

私が探しているものだと思います：

HTML:

<div class="divItem" style="width:50px;height:50px;background-color:#FFEFC6">Item A</div>
<br />
<div class="divItem" style="width:50px;height:50px;background-color:#FFEFC6">Item B</div>
<br />
<div class="divItem" style="width:50px;height:50px;background-color:#FFEFC6">Item C</div>
<div id="divMove" style="width:100px;height:100px;background-color:#D9E9D0;display:none">
</div>

ジャバスクリプト:

$(".divItem").mousemove(function(e){
    var left  = e.pageX + 10 + "px";
    var top  = e.pageY + 20 + "px";

    $("#divMove").show().css("top",top).css("left",left).css("position","absolute");
}).mouseout(function(){
    $("#divMove").hide();
   }).mouseenter(function(){
        $("#divMove").text($(this).text());    
});

サンプルを見るにはここをクリック

于 2011-02-02T08:16:38.523 に答える
0

ナンド、そこにはもっと良い答えがいくつかありますが、あなたが試したことは確かですが、私はこれをそこに投げたいだけです.

特に、hover() を使用しているため、非常に単純な問題に直面しているように思えます。

stop(true, true) を試したと思いますよね？

//
$('div.item').hover(
    function() {
        $(this).stop(true, true).showDetails();
    },
    function() {
        $(this).stop(true, true).hideDetails();
    }
);
//
于 2011-02-02T16:40:51.990 に答える
0

あなたの問題を視覚化するのに苦労しています。詳細ボックスがすべてのケースで同じように見えるかどうか、ページ上のアイテム div がどこにあるか、および相互の関連性が不明です。

そのためのJSFiddleを作成し、そこにいくつかの CSS、HTML、および JS を貼り付けてください。それから私は見ることができます。

于 2011-02-02T01:12:38.983 に答える