固定定位div的父元素宽度异常表现问题

我发现了一个奇怪的现象，希望有人能帮我理解。我有一个父元素div.container，其中包含其他div。第一个子元素div.background-div为fixed定位，覆盖整个窗口（最初将其放在container内是为了只需移除container就能将它从DOM中移除）。奇怪的是，devtools显示div.container的宽度为512px，但hover效果却在整个窗口范围内触发。我可以将div.background-div移出div.container来解决hover问题，但有没有办法通过CSS利用这个特性？

CSS 代码 #

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

.background-div {
  position: fixed;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  background-color: rgba(68, 65, 68, 0.5);
}

body {
  display: flex;
  height: 100vh;
  width: 100vw;
  justify-content: center;
  align-items: center;
}

.wrapper {
  position: relative;
  display: flex;
  width: 512px;
  height: 512px;
  align-items: center;
  border-radius: 10px;
  overflow: hidden;
}

.container {
  border-radius: 8px;
  transition: box-shadow 500ms ease;
}

.container:hover {
  box-shadow: 0px 0px 50px rgba(189, 18, 189, 0.5);
  transition: box-shadow 500ms ease;
}

.card-container {
  position: absolute;
  top: 0;
  display: flex;
  transition: 500ms ease-in-out;
  border-radius: 5px;
  cursor: pointer;
  overflow: hidden;
}

HTML 代码 #

<div class="container">
  <div class="background-div"></div>
  <div class="letters">
    <span class="letters">Hello</span>
  </div>
  <div class="wrapper" title="click-me!">
    <div class="card-container">
      <img src="https://picsum.photos/512/512/?blur" alt="">
    </div>
    <div class="card-container">
      <img src="https://picsum.photos/seed/picsum/512/512" alt="">
    </div>
  </div>
  <a href="#" class="link-it">More</a>
</div>

这个现象的核心原因是：固定定位（fixed）的元素虽然脱离了正常文档流，但仍然属于父元素的“可交互区域”。当鼠标悬停在fixed子元素上时，浏览器会将这个hover事件冒泡传递给它的父元素.container，所以即使container本身的尺寸只有512px，只要它的fixed子元素覆盖整个窗口，整个窗口范围的hover都会触发container的hover效果。

如果你想保留这个特性（让container的hover在整个窗口范围触发），不需要做额外修改，当前代码就已经实现了这个效果。

如果需要有条件地利用这个特性，可以通过以下方式：

• 控制fixed子元素的显示/隐藏：比如给.background-div加一个类，通过切换类来控制它的display: none或opacity: 0，这样就能控制父元素的hover触发范围是否覆盖整个窗口。
• 利用pointer-events属性：如果想临时禁用这个特性，可以给.background-div设置pointer-events: none，这样鼠标事件会穿透它，不会触发父元素的hover；需要恢复时再设置pointer-events: auto。

示例：

/* 禁用fixed元素的鼠标事件，此时container的hover仅在自身尺寸范围内触发 */
.background-div.no-hover {
  pointer-events: none;
}

这样你可以通过给.background-div添加/移除no-hover类，灵活切换父元素的hover触发范围，既保留了fixed元素在container内的DOM结构，又能按需控制交互效果。

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