使用margin: auto时pointer-events: none未生效的问题求助

我来帮你拆解下这个问题：你遇到的左右边缘移出不触发背景变色的情况，核心原因是层叠上下文和鼠标事件的穿透逻辑在搞鬼。

为什么会出现这个差异？ #

你的 .background 设置了 z-index: -1，这意味着它会被放在 <body> 元素的下方。当你从 .content > div 的左右边缘移出时，鼠标其实进入了 <body> 的空白内容区域（因为 .content 是居中的，左右的 margin 属于 <body> 的内容范围），而 <body> 默认的 pointer-events: auto 会把鼠标事件拦截下来，导致 .background 收不到 mouseover 事件。

而上下边缘移出时，鼠标大概率落到了 <body> 的默认 margin 区域（浏览器给 <body> 加了 8px 的默认 margin），这个区域不属于 <body> 的内容区域，所以鼠标事件会直接被覆盖整个视口的 .background 捕获，因此功能正常。

解决方案1：调整层叠与事件穿透规则 #

通过修改 CSS，让鼠标事件能穿透 <body> 到达 .background，同时保证内容区域的交互正常：

/* 让body不拦截鼠标事件，穿透到下方的.background */
body {
  pointer-events: none;
  margin: 0; /* 可选：去掉body默认margin，让背景完全覆盖视口 */
}

.content {
  width: 300px;
  margin: auto;
  pointer-events: none;
}

.content > div {
  border: 1px solid black;
  background-color: grey;
  pointer-events: auto; /* 保留内容区域的交互能力 */
}

.background {
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  position: fixed;
  z-index: 0; /* 把背景从body下方移到内容下方，避免被body拦截 */
  background: green;
}

解决方案2：换用更合适的事件监听 #

放弃只监听 .background 的 mouseover，改为监听内容区域的 mouseleave 事件，这样不管鼠标从哪个边缘移出内容区域，都会触发变色，同时保留背景的 mouseover 处理从页面外进入的情况：

function changeColor() {
  const bgEl = document.querySelector(".background");
  bgEl.style.backgroundColor = '#' + Math.floor(Math.random() * 16777215).toString(16);
}

// 鼠标离开内容区域时变色
document.querySelector(".content > div").addEventListener("mouseleave", changeColor);
// 鼠标从页面外进入背景时变色
document.querySelector(".background").addEventListener("mouseover", changeColor);
// 保留点击变色功能
document.querySelector(".background").addEventListener("click", changeColor);

这个方案更直接，完全避开了层叠上下文的坑，能覆盖所有场景。

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