마우스를 가져갈 때 div 표시

Question

헤더에 id="show" 링크가 있고 하단에 div id="display"이 있습니다. 머리글 영역에있는 id="show"에 마우스를 올려 놓으면 div id="display"이 표시되고 div는 바닥 글 영역에 표시됩니다.

HTML 코드 :

<header> 
<a href="#" id="show"><span> Show Div </span></a> 
</header> 
<---- Other Content --> 
<footer> 
<div id="display"> --- Content --- </div> 
</footer> 

Answer 1

이 시도 : 아래 그림과 같이 .hover() 기능을 사용할 수 있습니다. 쉼표로 구분 된 함수를 전달하십시오. 첫 번째 함수는 mouseover이고 두 번째는 mouseleave 이벤트입니다. JQuery와없이

$(function(){ 
    $('#show').hover(function(){ 
    $('#display').show(); 
    },function(){ 
    $('#display').hide(); 
    }); 
}): 

Answer 2

:

document.getElementById('show').onmouseover = function(evt) { 
    document.getElementById('display').style.display = "inline"; 
} 

Answer 3

희망이 당신을 위해 무엇을 찾고 있습니다.

http://jsfiddle.net/rxffwyux/

HTML

<header> 
    <a href="#" id="show"><span> Show Div </span></a> 
</header> 
<---- Other Content --> 
    <footer> 
     <div id="display"> --- Content --- </div> 
    </footer> 

CSS

#display { 
    display: none; 
} 

JS

(function() { 
     $(function() { 
      //On Dom Ready 
      $('body').on({ 
       mouseenter: function() { 
        $('#display').show(); 
       }, 
       mouseleave: function() { 
        $('#display').hide(); 
       } 
      }, '#show'); 
     }); 
    }());