親要素から視覚的に切り離されているにもかかわらず、絶対配置された要素がホバリングスコープ内にあるのはなぜですか？

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：

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

私は.absoluteオーバーその背景色の変更を置く

.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）から切り離さ視覚的にですが、限り、その親に属する意味的（.absolute）子要素として、ブラウザは右、マウスポインタが.absoluteでもあると考えていることを？示し

したがって、.absoluteを超えると、.relative:hoverを意味しますか？

これは巻き上げと呼ばれていますか？

誰かが私の頭の上に霧をクリアする。

Answer 1

「視覚的に」切り離されている可能性がありますが、ブラウザのDOMパーサは依然としてページにHTMLタグを表示します。 CSSはDOMモデルを変更しなかったので、ブラウザは依然として絶対配置された要素がまだその親要素の内部にあると考えています。

ブラウザはこのようなマウスイベントを処理するので、前述のような動作が発生します。

ITSは

HoistingはJavaScriptで異なる概念である（同じもののために異なる用語を）..散水またはキャプチャと呼ばれる（例えば関数と変数の宣言はコンパイル時に一番上に移動され

Answer 2

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

私はこのようにあなたのCSSを理解しています：.relativeにマウスカーソルを移動すると、その子を.absoluteに変更してください（それは.absoluteが.relativeの子であるためです）

.absoluteにカーソルを移動しても背景の変更が行われるのは、実際には.relativeにカーソルを合わせているためです。