onMouseOut은 앵커 태그 내에서 이동할 때 자주 발생합니다.

Question

onMouseOver 및 onMouseOut 이벤트가 모두있는 앵커 태그가 있습니다. 목적은 툴팁을 표시하는 것입니다. 앵커 태그 위로 마우스를 가져 가면 onMouseOver 이벤트가 적절하게 트리거되고 툴팁이 표시되지만 onMouseOut 이벤트도 트리거되고 툴팁이 숨겨집니다. 앵커 링크 위에서 마우스를 움직이면 두 이벤트 모두 매우 자주 발생하여 툴팁 플래시가 매우 빠르게 보이고 보이지 않게됩니다. onMouseOut을 앵커 태그의 경계 밖으로 벗어나게하면 onMouseOut이 실행되기를 원합니다. 내가 생각

코드 관련 :

HTML :

<ul> 
<li> 
<a id="1" href="event.php?1" onmouseover="tooltip(this.offsetWidth, this.offsetHeight, this.childNodes, 1)" onmouseout="tooltipHide(1)">Text</a> 
<div class="tt"> 
<div id="tt2" class="tooltip"> 
... 
</div> 
</div> 
</li> 

<li> 
<a id="2" href="event.php?2" onmouseover="tooltip(this.offsetWidth, this.offsetHeight, this.childNodes, 2)" onmouseout="tooltipHide(2)">Text</a> 
<div class="tt"> 
<div id="tt2" class="tooltip"> 
... 
</div> 
</div> 
</li> 
</ul> 

자바 스크립트 :

function tooltipHide(id) { 
tt = document.getElementById("tt"+id); 
tt.style.display = "none"; 
} 

function tooltip(oW, oH, e, id) { 
... 
tt = document.getElementById("tt"+id); 
tt.style.display = "block"; 
... 
} 

Answer 1

조금 미쳤지 만 문제는 툴팁이 나타나면 이벤트를 트리거 한 텍스트와 겹치는 것입니다. 어떤 이유로 인해 두 기능이 빠르게 앞뒤로 트리거됩니다. 툴팁을 텍스트에서 멀리 이동하여 문제를 해결했습니다.

Answer 2

onMouseover와는 언제 마우스가 들어가거나 항목을 통해 이동 overed되고 실행됩니다. 대신 onmouseenter에 툴팁을 표시하고 싶을 것입니다. 그것은 마우스가 요소의 테두리를 내부로 가로 지르는 경우에만 트리거됩니다.