为什么绝对定位的元素仍然在悬停范围内，即使它在视觉上与父区域分离？

Question

我有一个关于 CSS 的相对-绝对关系的简单问题。

这是一个简单的例子。

HTML:

<div class="relative">
    relative area
    <div class="absolute">I am relative area's son. Hover over me! my bg-color changes!</div>
</div>

CSS:

.absolute {
    width: 140px;
    height: 140px;
    background-color:tomato;
    position: absolute;
    left: 120%;
        top: 0;
}
.relative {
    position: relative;
    border: 2px solid #000;
    width: 200px;
    height: 200px;
    margin-top: 200px;
}
.relative:hover .absolute {
    background-color: yellowgreen;
}

https://codepen.io/nori2tae/pen/ZXgMjZ

当我将鼠标悬停在 .absolute 上时，它的背景颜色会发生变化。

这说明虽然视觉上脱离了父区域(.relative)，但只要有一个子元素(.absolute)语义上属于它的父级，浏览器认为鼠标指针也在.absolute上，对吗？

因此将鼠标悬停在 .absolute 上也意味着 .relative:hover?

这就是所谓的吊装吗？

有人请拨开我头上的迷雾。

Answer 1

它可能是 "visually" 分离的，但浏览器 DOM 解析器仍然看到你的页面一堆 HTML 标签。由于 CSS 没有改变 DOM 模型，浏览器仍然认为绝对定位的元素仍在其父元素内。

现在，由于浏览器负责处理此类鼠标事件，您会得到上述行为。

它被称为滴流或捕获..（同一事物的不同术语）

Hoisting 是 javascript 中的不同概念（例如，函数和变量声明在编译期间移至顶部

Answer 2

.relative:hover .absolute {
    background-color: yellowgreen;
}

我理解你的 css 是这样的：当悬停在 .relative 上时，使其 child .absolute 改变背景。它就是这样做的（因为 .absolute 是 .relative 的 child）。我看不出这里有什么问题？

您将鼠标悬停在 .absolute 上并且仍然看到背景变化的原因是因为实际上您将鼠标悬停在 .relative 上。

为什么绝对定位的元素仍然在悬停范围内，即使它在视觉上与父区域分离？

Why is absolutely positioned element still in hover scope even though it is visually detached from parent area?

css

css-position

absolute