鼠標懸停時顯示div

Question

我在頁眉中有一個鏈接id="show"，頁腳中有一個div id="display"。當鼠標懸停在id="show"上的標題區域和div位於頁腳區域時，我想顯示div id="display"。

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事件第一個函數調用。

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

Answer 2

沒有JQuery的：

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