부모 영역에서 시각적으로 분리 된 경우에도 요소가 여전히 호버 범위에있는 이유는 무엇입니까?

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 모델을 변경하지 않았기 때문에 브라우저는 절대 위치 요소가 여전히 부모 요소 안에 있다고 생각합니다.

브라우저가 이러한 마우스 이벤트를 처리해야하므로 언급 된 동작이 발생합니다.

그는

Hoisting 자바 스크립트의 다른 개념이다 (동일한 우선 다른 용어) .. 살수 또는 캡처 호출 (예. 함수 및 변수 선언 컴파일 동안 위로 이동

Answer 2

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

나는 당신의 CSS를 이렇게 이해한다 : .relative에 마우스를 올리면 그 자식을 .absolute으로 바꾼다. (단지 .absolute이 .relative의 자식이기 때문에) 여기에 잘못된 것이 보이지 않는다?

.absolute 위에 마우스를 올려 놓고 배경 변경을 계속하는 이유는 실제로 .relative 위로 마우스를 올려 놓기 때문입니다.