Question

我发布这个问题是为了回应我几天前提出的一个问题，我已经创造了一个小提琴，希望能给出更明确的解释。我可以将鼠标悬停在div上（使用css悬停属性），在鼠标悬停状态下，在屏幕的另一部分上弹出另一个div。当我老鼠离开时，它会消失。当我点击悬停div时，正在消失并重新出现的红色div停留，另一个div弹出（作为弹出状态）。我可以点击新的蓝色框来关闭蓝色div和红色div。在第一次迭代之后，我将鼠标悬停在原始悬停div上，红色div再次弹出。只有这一次，当我离开鼠标时，红色的div仍然存在（不会像原来那样消失......任何提示或技巧都会有所帮助。

$('#bg').on({
    mouseover: function () {
        $('#bg2').css('display', 'block');
    },
    mouseleave: function () {
        $('#bg2').css('display', 'none');
    },
    click: function () {
        $('#bg3').css('display', 'block'),
        $('#bg').off('mouseleave');
    }
});

$('#bg3').on({
    click: function () {
        $('#bg3').css('display', 'none'),
        $('#bg2').css('display', 'none');
    }
});

http://jsfiddle.net/skinnyb/0vvk945y/1/

Answer 1

<强> fiddle

function mouseLeaveStuff() { // Create a function
    $('#bg2').hide();
}

$('#bg').on({
    mouseenter: function () { // (P.S: Use mouseenter with mouseleave)
        $('#bg2').show();
    },
    mouseleave: mouseLeaveStuff, // Use your function
    click: function () {
        $('#bg3').show(),
        $('#bg').off('mouseleave'); // Off event
    }
});

$('#bg3').on({
    click: function() {
        $('#bg3, #bg2').hide();
        $('#bg').on('mouseleave', mouseLeaveStuff); // Reassign event and function
    }
});

如果您愿意，还可以将所有代码重写为：

var activated = 0;

$("#bg").hover(function(){
    if(!activated) $('#bg2').toggle();
}).click(function(){
    activated = 1;
    $("#bg3").show().on("click", function(){
        activated = 0;
        $( "#bg2" ).add( this ).hide();
    });
});

编辑：根据请求

如果您想使用多个元素，最好使用.类而不是# ID：

$(".bg").each(function(){
  var $bg  = $(this);
  var $bg2 = $bg.nextAll('.bg2:first');
  var $bgP = $bg.nextAll('.bgpopup:first');
  $bg.data("activated", 0).hover(function(){
    if($bg.data("activated") === 0) $bg2.toggle();
  }).click(function(){
    $bg.data("activated", 1);
    $bgP.show().on("click", function(){
      $bg.data("activated", 0);
      $bg2.add( this ).hide();
    });
  });
});

.bg {
  background: #ccc;
  width: 200px;
  height: 120px;
}
.bg:hover {
  background: #000;
}
.bg2 {
  position:absolute; top:250px;
  left:250px;
  background: red;
  width: 200px;
  height: 120px;
  display:none;
}
.bgpopup {
  background: blue;
  width: 200px;
  height: 120px;
  display:none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="bg">1</div>
<div class="bg2">1</div>
<div class="bgpopup">1</div>

<div class="bg">2</div>
<div class="bg2">2</div>
<div class="bgpopup">2</div>

Answer 2

不会像最初那样消失

这是因为0处理程序中的off方法删除了绑定的click处理程序。您应该将mouseleave处理程序重新绑定到元素或使用标记。

Answer 3

再次添加mouseleave

$('#bg3').on({
    click: function () {
        $('#bg3').css('display', 'none'),
        $('#bg2').css('display', 'none');

        $('#bg').on({mouseleave: function () {
            $('#bg2').css('display', 'none');
        }}); 
    }
});

SEE DEMO

mouseleave

3 个答案: