자바 스크립트 onmouseout도 마우스 위로 작동합니다

Question

표시/숨기기를 시도했습니다 일부의 버튼을 텍스트로 표시합니다. 버튼을

<button id="SOS" onmouseover="show()" onmouseout="hide();"> 
    <p>S.O.S</p> 
    <div id="sos_left"> <?=$text_to_show_hide?></div> 
</button> 

과 자바 스크립트 코드는 것은 마우스 밖으로 경고도 내가 마우스 overing있을 때이다

<script type="text/javascript"> 
function show() 
    { 
     sos_left=document.getElementById('sos_left'); 
     alert("mouseover"); 
     sos_left.style.color = "red"; 
     sos_left.style.fontSize = "28"; 

    } 
function hide(){ 

     sos_left=document.getElementById('sos_left'); 
     alert("mouseout"); 
     sos_left.style.color = "blue"; 
     sos_left.style.fontSize = "0"; 
} 
</script> 

입니다.

참고 : 사이트가 vbulletin 기반이며이 코드를 템플릿 중 하나에서 사용하기 때문에 jquery를 사용할 수 없습니다. 당신은 아무것도 숨길 해달라고

Answer 1

..

사용 display:none 요소를 "제거"하기 위해, 또는 visibility:hidden을 요소를 숨 깁니다.

요소를 "다시 추가"하려면 visibility 속성을 사용하여 숨기기 위해 display: block 또는 visibility:visible을 사용하십시오.

각각의 차이점을 확인해보십시오.

또 다른 문제는,

당신은 변수로 sos_left을 사용하려고하지만 변수로 선언하지 않았다.

대신에 var sos_left을 사용하십시오.

Answer 2

button이 아닌 div에 이벤트를 적용했기 때문입니다. 이 시도 :

sos_button=document.getElementById('SOS'); 

Answer 3

을 문제가 mouseover 및 mouseout 이벤트 거품까지이며,이 커서가 입력하고 때 버튼의 후손 요소에서 종료가 버튼에 정의 된 이벤트 리스너가 너무 트리거되는 것을 의미 .

이벤트를 생성 한 요소가 실제로 <button> 요소인지 확인하는 것입니다.

<button id="SOS" onmouseover="show(event)" onmouseout="hide(event);">... 

그런 다음 JS 코드 : (너무 오페라에서 지금)

function show(e) { 
    if ((e.target || e.srcElement).id !== "SOS") return; 
    ... 

function hide(e) { 
    var tgt = e.target || e.srcElement; 
    if (tgt.id !== "SOS") return; 
    // If the cursor enter in one of the descendants, mouseout is fired, but 
    // we don't want to handle this 
    if (tgt.contains) { 
     if (tgt.contains(e.relatedTarget || e.toElement)) return; 
    } else if (this.compareDocumentPosition) 
     if (tgt.compareDocumentPosition(e.relatedTarget) 
       & Node.DOCUMENT_POSITION_CONTAINS) return; 
    ... 

Internet Explorer에서

이 매우 유사하게 동작 이러한 이벤트 mouseenter 및 mouseleave가 있지만 돈 '과 같이 DOM을 수정 터지다. 다른 브라우저의 경우 jQuery와 같은 공통 프레임 워크에서 에뮬레이트됩니다.

마지막으로, 기존보다 이벤트 리스너를 부착하는 데 좀 더 현대적인 방법을 사용하는 것이 좋습니다. 또한 sos_left을 정의하는 방식은 전역 변수가된다는 의미입니다. 정의 앞에 키워드 var을 사용하십시오.