两个div重叠，如何让鼠标事件穿透

可以使用CSS的pointer-events属性来实现鼠标事件穿透。将重叠的div的pointer-events属性设置为"none"，这样鼠标事件就会被穿透到下面的div上。例如：

.overlap {
  position: absolute;
  top: 0;
  left: 0;
  width: 100px;
  height: 100px;
  background-color: red;
  opacity: 0.5;
  pointer-events: none; /* 让鼠标事件穿透 */
}

.under {
  position: absolute;
  top: 50px;
  left: 50px;
  width: 100px;
  height: 100px;
  background-color: blue;
}

HTML代码：

<div class="overlap"></div>
<div class="under"></div>

这样，即使鼠标在红色的div上，事件也会被传递到蓝色的div上。

相关问题

两个div重叠，如何让鼠标事件同时作用到两个div

可以使用 CSS 的 pointer-events 属性，将其设置为 auto。这将允许鼠标事件在重叠的 div 上同时生效。例如：

div {
  pointer-events: auto;
}

需要注意的是，如果两个 div 上都有事件处理程序，那么将会同时触发两个处理程序。如果希望只触发其中一个，可以使用事件委托机制，或者使用 JavaScript 代码在事件处理程序中进行判断。

html两个div重叠

如果您想让两个 `div` 元素重叠，可以使用 CSS 中的 `position` 属性。将它们的 `position` 属性设置为 `absolute` 或 `relative`，并使用 `top`，`left`，`right` 和/或 `bottom` 属性来指定它们相对于其父元素的位置。

例如，以下代码将两个 `div` 元素重叠在一起：

<style>
    .box1 {
        position: absolute;
        top: 0;
        left: 0;
        width: 200px;
        height: 200px;
        background-color: red;
    }
    .box2 {
        position: absolute;
        top: 50px;
        left: 50px;
        width: 200px;
        height: 200px;
        background-color: blue;
    }
</style>

<div class="box1"></div>
<div class="box2"></div>

在上面的代码中，第一个 `div` 元素（红色）的 `position` 属性设置为 `absolute`，并且 `top` 和 `left` 属性设置为 `0`，让它始终位于其父元素的左上角。第二个 `div` 元素（蓝色）的 `top` 和 `left` 属性设置为 `50px`，使其相对于第一个 `div` 元素向下和向右移动。这样，两个 `div` 元素就重叠在一起了。