Display div on mouse hover

Question

I have a link id="show" in header and a div id="display" in footer. I want to display div id="display" when mouse hover on id="show" that is in header area and div is in footer area.

HTML CODE:

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

Answer 1

Try this : You can use .hover() function as shown below. Pass comma seprated functions to it. First function to call when mouseover and second for mouseleave event.

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

Answer 2

Without JQuery:

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

Answer 3

Hope this is what you are looking for.

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');
        });
    }());