在儿童身上触发mouseleave

Trigger mouseleave when over a child

本文关键字：mouseleave      更新时间：2023-09-26

我陷入了一个很容易解决的问题，但我无法做到。我希望当我悬停它时，我父母的风格会改变，但当我悬停父母的孩子时，会恢复正常。

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

使用mouseover和mouseout并检测mouseover中触发的元素。

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

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");
    }
});

现在它工作了，谢谢里格斯！

相关文章：