如何让堆叠的两个div同时具备点击、悬停和滚动交互能力？

问题核心是绝对定位元素的层级关系导致上层元素拦截所有指针事件，下层元素无法响应。以下是两种可行的解决思路：

思路1：仅让上层元素的交互区域响应指针事件 #

如果只有上层hoverable内的部分元素需要交互（比如示例里的<h2>），可以通过pointer-events控制事件穿透：

修改后的CSS代码：

.container {
  position: relative;
}
.scrollable {
  border: 1px solid blue;
  height: 100px;
  width: 200px;
  overflow-y: scroll;
  z-index: 1;
  position: absolute;
}

.hoverable {
  color: red;
  height: 100px;
  width: 200px;
  border: 1px solid red;
  z-index: 2;
  position: absolute;
  pointer-events: none; /* 让上层容器不拦截指针事件，下层元素可接收 */
}

.hoverable > * {
  pointer-events: auto; /* 恢复内部子元素的交互能力 */
}

.hoverable:hover {
  background-color: rgba(0,0,0,0.3);
}

设置后，scrollable可正常滚动、响应点击，hoverable内的<h2>也能触发hover和点击事件。

思路2：让上层元素整体支持hover和点击，同时不遮挡下层 #

如果需要hoverable整个区域都能触发hover效果且支持点击，可结合JavaScript事件委托实现：

修改后的CSS #

.container {
  position: relative;
}
.scrollable {
  border: 1px solid blue;
  height: 100px;
  width: 200px;
  overflow-y: scroll;
  z-index: 1;
  position: absolute;
}

.hoverable {
  color: red;
  height: 100px;
  width: 200px;
  border: 1px solid red;
  z-index: 2;
  position: absolute;
  pointer-events: none; /* 允许指针事件穿透到下层 */
}

/* 用自定义类替代:hover伪类 */
.hoverable.hover-active {
  background-color: rgba(0,0,0,0.3);
}

对应的JavaScript代码 #

const container = document.querySelector('.container');
const hoverable = document.querySelector('.hoverable');

// 监听hover状态
container.addEventListener('mouseover', (e) => {
  if (hoverable.contains(e.target)) {
    hoverable.classList.add('hover-active');
  }
});

container.addEventListener('mouseout', (e) => {
  if (!hoverable.contains(e.relatedTarget)) {
    hoverable.classList.remove('hover-active');
  }
});

// 处理点击事件
container.addEventListener('click', (e) => {
  if (hoverable.contains(e.target)) {
    // 这里添加hoverable区域的点击逻辑
    console.log('hoverable区域被点击');
  }
});

这种方式既保证scrollable正常交互，又实现hoverable整体的hover和点击效果。

内容的提问来源于stack exchange，提问作者user15575918