body : hover가 적용되는 곳은 어디입니까?

Question

I는 사용자가 창 (body 요소) 가리키면 애니메이션을 트리거하는 디자인과 같이 있습니다

body:hover .block1 { 
width: 210px; 
transition: width .2s; 
} 

.block1는 위치 가지고 절대 특성, 및 컨테이너의 내부 (절대적). position : relative를 가진 다른 div (.parent)가 페이지에 있습니다. 따라서 .container와 .parent라는 두 개의 주요 div가 있습니다.

본문 위로 마우스를 가져 가면 애니메이션이 시작됩니다. 그러나 특정 부분 위로 마우스를 가져 가면 예를 들어 컨테이너의 오른쪽 가장자리 나 2div 사이에 애니메이션이 멈 춥니 다. 몸에 붙어있는 "마우스 오버"로 읽히지 않습니다. 페이지 주위의 일부 작은 공간 (무작위로 보이는 것)에만 있습니다. 여기서 무슨 일이 일어나고있는거야?

Answer 1

하나씩 "작동하지 않는"모든 요소에 애니메이션을 적용하거나 * 선택기를 사용하십시오. 당신 때문에 아직없는 '호버'에서 블록 1 애니메이션 정류장에서 마우스를 이동

Answer 2

는

이 상황에 대한 솔루션에만 자바 스크립트

$(".block1").mouseenter(function() { 
     $(this).addClass('active') 
}).mouseleave(function() { 
// you can enter code here if the mouse out of the .block1 
}); 

CSS를

입니다

.active { 
width: 210px; 
transition: width .2s; 
}