鼠标悬停鼠标悬停，内容重叠 [英] Mouseover Mouseout with overlapping content

问题描述

当我用class=background(演示中的绿色小方块)将div悬停在div上时，我用class=hover(在演示中显示灰色和蓝色的div)淡入了div.

When I mouseover the div with class=background (the little green square in the demo) I fade in the div with class=hover (displaying the grey and blue divs in the demo).

灰色部分与.background重叠，我可以在其内部移动鼠标，而不会触发.background上的mouseout.

The grey partially overlaps the .background and I can move the mouse around inside it without triggering the mouseout on .background.

但是..

如果将鼠标移到灰色div之外(例如，将鼠标悬停在蓝色上)，则会触发.background上的mouseout.

If I move the mouse outside the grey div (to hover over the blue for example) then the mouseout on .background gets triggered.

如何防止这种情况发生，只要我将鼠标悬停在新显示的.hover div上，就不会触发'.background'上的mouseout吗?

How can I prevent this from happening so that as long as I am hovering over the newly displayed .hover div the mouseout on '.background' will not be triggered?

$('.AddDiv').on('click', function() {
  var html = '<div class="container"><div class="background"></div><div class="hover"></div></div>';
  $('.Wrap').prepend(html);
});

$(".Wrap").on("mouseover", ".background", function() {
  $(this).next(".hover").fadeIn(500);
});

$(".Wrap").on("mouseout", ".hover", function() {
  $(this).fadeOut(200);
});

.Wrap {
  width: 650px;
  height: 800px;
}
.container {
  position: relative;
  top: 5px;
  left: 5px;
  width: 200px;
  height: 200px;
  background-color: red;
  float: left;
  margin-left: 5px;
  margin-top: 5px;
}
.AddDiv {
  position: absolute;
  top: 0px;
}
.background {
  width: 20px;
  height: 20px;
  background-color: green;
  position: absolute;
  left: 170px;
  top: 10px;
}
.content {
  width: 170px;
  height: 120px;
  background-color: grey;
  position: relative;
  left: 15px;
  top: 15px;
}
.navigation {
  width: 190px;
  height: 40px;
  background-color: blue;
  position: relative;
  top: 30px;
  left: 5px;
}
.hover {
  width: 200px;
  height: 200px;
  background-color: rgba(255, 255, 255, 0.8);
  position: absolute;
  z-index: 1001;
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="Wrap">
  <div class="container">
    <div class="background"></div>
    <div class="hover">
      <div class="content"></div>
      <div class="navigation"></div>
    </div>
  </div>
</div>
<button class=AddDiv>AddDiv</button>

推荐答案

使用mouseleave代替mouseout:

$('.AddDiv').on('click', function() {
    $('.Wrap').prepend($('<div class="container"><div class="background"></div><div class="hover"></div></div>'));
});

$(".Wrap").on("mouseover", ".background", function () {
    $(this).next(".hover").fadeIn(500);
});


$(".Wrap").on("mouseleave", ".hover", function () {
$(this).fadeOut(200);
});

这篇关于鼠标悬停鼠标悬停，内容重叠的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！