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 彼此相关。如何解决此问题以使 Buttun1 仅在鼠标悬停在 DIV#1 上时显示。

我曾尝试使用 z-index，但没有帮助。

4

2 回答 2

0

假设div2在顶部div1，问题是当您将鼠标放在两个 div 重叠的区域时，两个 div 都会获得 mouseover 事件。您可以停止事件传播，#div2以便鼠标悬停不会冒泡到底层div1母鸡鼠标进入div2并进入重叠区域。

$('#div2').mouseover(function(event) {
    $("#button2").show();
    event.stopPropagation();// this will stop mouseover on other div
});

同样，您可能希望添加代码以button1在鼠标从div1到时删除，div2而不会留下不可靠div1的部分，即重叠区域。

$('#div2').mouseover(function(event) {
    $("#button1").hide();
    $("#button2").show();
    event.stopPropagation();
});
于 2013-09-15T17:16:35.237 回答
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 回答