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

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

下面是一个简单的例子

HTML:

当我将鼠标悬停在

.absolute

上时，它的背景颜色会改变

这表明，尽管它在视觉上与父区域（

.relative

）分离，但只要子元素（

.absolute

）在语义上属于其父元素，浏览器就会认为鼠标指针也在

.absolute

，对吗

因此，将鼠标悬停在

.absolute

上也意味着

.relative:hover

这就是所谓的吊装吗

有人请清除我头上的迷雾。

它可能是“视觉上”分离的，但对于浏览器，DOM解析器仍然会看到您的页面上有一堆HTML标记。由于CSS没有改变DOM模型，浏览器仍然认为绝对定位的元素仍然在其父元素内

现在，由于浏览器负责处理此类鼠标事件，所以您可以获得上述行为

它被称为涓涓细流或捕获。。（同一事物的不同术语）

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

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

我对css的理解是这样的：当鼠标悬停在

.relative

上时，让它的子对象

.absolute

更改背景。它就是这样做的（因为

.absolute

是

.relative

的子对象）。我不知道这里出了什么问题

---

您将鼠标悬停在

.absolute

上而仍然得到背景更改的原因是，事实上，您将鼠标悬停在

上。relative

在视觉上是一件事，DOM结构是另一件事。应用CSS不会影响DOM/event/etc的工作方式。DOM保持不变，元素始终是其父元素trilling的子元素，c阿普图灵…以前从没听说过他们，但我明白了。

.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;
}

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