当超过 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

RiggsFolly 评论有效将 JS 更改为：

$('#parent').on({
    mouseenter: function (event) {
        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");
    }        
});
$('#child').on({
    mouseenter: function (event) {
        event.stopPropagation();
        event.stopImmediatePropagation();
        $("#parent").css("box-shadow", "inset 0 0 0 0px green");
    },
    mouseleave: function (event) {
        event.stopPropagation();
        event.stopImmediatePropagation();
        $("#parent").css("box-shadow", "inset 0 0 0 1000px green");
    }
});

现在可以使用了，谢谢 Riggs！

Answer 2

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

$('#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>

当超过 child 时触发 mouseleave

Trigger mouseleave when over a child

html

javascript

jquery

hover