1

マウスオーバー時にボタンを表示し、マウスアウト時に非表示にする関数を作成しようとしています。次の例は、私の問題を示しています。

------------------------------------------------------------


 ---------
| button2 |           DIV#1                 Button1
|         |
| DIV#2   |
|         |
----------------------------------------------------------
|         |
-----------

**The CSS** 
#div1{

    height: 200px;
    width:500px;
    position: relative;
}
#div2{
    height: 150px;
    width: 150px;
    left: 19px;
    top: 76px;
    position: absolute;
}


**Javascript**
$("#button1").hide();
$("#button2").hide();

$('#div1').mouseover(function() {
$("#button1").show();
});

$('#div1').mouseout(function() {
$("#button1").hide();
});

$('#div2').mouseover(function() {
$("#button2").show();
});

$('#div2').mouseout(function() {
$("#button2").hide();
});

HTML 実は私のドキュメントにはたくさんの要素があります。しかし、見やすくするために：

<div id='div1'>  <div id='div2'>example button2 </div> example button1 </div>

問題は ：

DIV#2 にマウスオーバーすると、Button1 も表示されます。この2つのdivは互いに関連しているようです。DIV#1 にマウスオーバーしたときにのみ Buttun1 が表示されるようにするには、この問題を修正する方法を教えてください。

z-index を使用しようとしましたが、役に立ちません。

4

2 に答える 2

0

div 2 が div 1 の子である場合、div 2 のホバー イベントは div 1 までバブリングします。あなたがする必要があるのは、バブリングを防ぐために event.stopPropagation() を使用することです:

/* CSS */
#button1, #button2 {
    display: none;
}

/* jQuery */

$(function() {

    $('#div2').hover(
        function(event) {
            event.stopPropagation();
            $('#button2').toggle();
        },
        function(event) {    
            event.stopPropagation();   
            $('#button2').toggle();
        });

    $('#div1').hover(
        function() {
            $('#button1).toggle();
        },
        function() {
            $('#button2').toggle();
        });


});
于 2013-09-15T17:24:24.913 に答える