왜 mouseleave에서 mousemove의 오버레이가 사라지지 않습니까?

Question

하늘색 사각형이 있습니다. 마우스가 하늘색 사각형 안쪽으로 움직이면 작은 사각형이 마우스와 함께 움직입니다. 마우스가 영역을 벗어나면 작은 사각형이 사라지지만 가끔씩 계속 나타납니다.

나는 코드에 아무것도 표시되지 않습니다. 아무도 왜 이것이 일어나고 있는지 말해 줄 수 있습니까?

$(function() { 
 
    $("#div1").on("mousemove", function(e) { 
 
    $("#div2").css({ 
 
     "display": "inline", 
 
     "left": e.clientX, 
 
     "top": e.clientY 
 
    }); 
 
    }) 
 
    $("#div1").on("mouseleave", function() { 
 
    $("#div2").hide(); 
 
    }) 
 
})

#div1 { 
 
    background-color: skyblue; 
 
    width: 200px; 
 
    height: 100px 
 
} 
 
#div2 { 
 
    background-color: white; 
 
    width: 35px; 
 
    height: 15px; 
 
    border: 1px solid black; 
 
    display: none; 
 
    position: fixed; 
 
} 
 
#div2 p { 
 
    font-size: 12px; 
 
    margin: 0px 2px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div id="div1"> 
 
    <div id="div2"> 
 
    <p>mouse</p> 
 
    </div> 
 
</div>

Answer 1

문제 당신을 마우스가 #div1으로 남았 기 때문에이상으로보고 있습니다., #div1의 하위 항목입니다.

#div2은 position: fixed;이므로 #div1의 자녀로 사용할 필요는 없습니다. 이 e.clientX 또는 e.clientY이 #div1의 실제 연회비 구형의 외부인지 확인하고 트리거 이벤트로 그를 사용하는 것도 가능하지만, 그렇게처럼 DOM에 #div1에서 #div2를 이동하는 간단한 것이다 :

<div id="div1"> 

</div> 
<div id="div2"> 
    <p style="font-size:3px;margin:0px 2px;">mouse</p> 
</div> 

아래 코드 조각은이 작동 방식을 보여줍니다. 코드를 테스트하지 않고

$(function() { 
 
    $("#div1").on("mousemove", function(e) { 
 
    $("#div2").css({ 
 
     "display": "inline", 
 
     "left": e.clientX, 
 
     "top": e.clientY 
 
    }); 
 
    }) 
 
    $("#div1").on("mouseleave", function() { 
 
    $("#div2").hide(); 
 
    }) 
 
})

#div1 { 
 
    background-color: skyblue; 
 
    width: 200px; 
 
    height: 100px; 
 
} 
 
#div2 { 
 
    background-color: white; 
 
    width: 35px; 
 
    height: 15px; 
 
    border: 1px solid black; 
 
    display: none; 
 
    position: fixed; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="div1"> 
 

 
</div> 
 
<div id="div2"> 
 
    <p style="font-size:3px;margin:0px 2px;">mouse</p> 
 
</div>

Answer 2

은이 /가 사업부를 숨길 보여주기 위해 CSS를 사용하고, JS는 커서에 사업부를 이동 :

document.body.addEventListener("mousemove", function(e) { 
 
    var div2 = document.getElementById("div2"); 
 

 
    div2.style.left = e.clientX + "px"; 
 
    div2.style.top = e.clientY + "px"; 
 
});

#div1 { 
 
    width: 200px; 
 
    height: 100px; 
 
    background: skyblue; 
 
} 
 

 
#div2 { 
 
    position: fixed; 
 
    top: 0px; 
 
    left: 0px; 
 
    width: 35px; 
 
    background: white; 
 
    border: 1px solid black; 
 
    padding: 2px; 
 
    font-size:3px; 
 
    display: none; 
 
} 
 
    
 
#div1:hover + #div2 { 
 
    display: block; 
 
}

<div id="div1"></div> 
 
<div id="div2">mouse</div>