如何将div悬停事件放在父级而不是子级上？

.parent {
  position: relative;
}

.child {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

<div class="parent" onmouseover="handleHover(event)">
  <div class="child"></div>
</div>

<script>
function handleHover(event) {
  // 处理悬停事件的逻辑
  console.log("父级悬停事件触发");
}
</script>

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

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(".parent").on("mouseover", function(event) {
  // 处理悬停事件的逻辑
  console.log("父级悬停事件触发");
});
</script>