javascript - 在 child 上方时触发 mouseleave

Question

我陷入了一些可能很容易解决的问题，但我无法做到。我希望当我将其悬停时， parent 的样式会发生变化，但当我将鼠标悬停在 parent 的 child 时，又会恢复正常。

html:

<div id="parent">
   <div id="child"></div>
</div>

Js/jQuery:

$('#parent').on({
    mouseenter: function (event) {
        event.stopPropagation();
        event.stopImmediatePropagation();
        $(this).css("box-shadow", "inset 0 0 0 1000px green");
    },
    mouseleave: function (event) {
        event.stopPropagation();
        event.stopImmediatePropagation();
        $(this).css("box-shadow", "inset 0 0 0 0px pink");
    }
});

fiddle :

Fiddle

Answer 1

使用鼠标悬停和鼠标移出并检测鼠标悬停时触发的元素。

$('#parent').on({
  mouseover: function(event) {
    if (!$(this).is(event.target)) return;
    event.stopPropagation();
    event.stopImmediatePropagation();
    $(this).css("box-shadow", "inset 0 0 0 1000px green");
  },
  mouseout: function(event) {
    event.stopPropagation();
    event.stopImmediatePropagation();
    $(this).css("box-shadow", "inset 0 0 0 0px pink");
  }
});

#parent {
  background-color: pink;
  width: 200px;
  height: 200px;
}
#child {
  position: relative;
  left: 75px;
  top: 75px;
  background-color: blue;
  width: 50px;
  height: 50px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="parent">
  <div id="child"></div>
</div>