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

将div悬停事件放在父级而不是子级上，可以通过以下几种方式实现：

使用CSS的pointer-events属性：将子级元素的pointer-events属性设置为none，这样鼠标事件会穿透子级元素并直接作用于父级元素。示例代码如下：

.parent {
  position: relative;
}

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

使用JavaScript事件委托：将悬停事件绑定在父级元素上，并通过事件冒泡机制捕获子级元素的悬停事件。示例代码如下：

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

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

使用jQuery的on方法：利用jQuery库的on方法，将悬停事件绑定在父级元素上，并通过事件冒泡机制捕获子级元素的悬停事件。示例代码如下：

<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>

以上是将div悬停事件放在父级而不是子级上的几种方法。根据具体的需求和使用场景，选择适合的方式进行实现。