鼠标悬停时显示div

我在页眉中有一个链接id="show"，页脚中有一个div id="display"。当鼠标悬停在id="show"上的标题区域和div位于页脚区域时，我想显示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>

来源

2014-12-02 Bigtech Ideas

“mouse hover on'id =”login“'”？ – 2014-12-02 08:09:16

http://api.jquery.com/hover/＆http://api.jquery.com/show＆http://api.jquery.com/hide – 2014-12-02 08:09:27

mouse id =“show”？ – 2014-12-02 08:21:07

试试这个：您可以使用.hover()功能，如下图所示。通过逗号分隔功能。当mouseover和mouseleave事件第一个函数调用。

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

来源

2014-12-02 08:11:00

没有JQuery的：

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

来源

2014-12-02 08:32:18 Jersh

希望这是你在找什么。

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

来源

2014-12-02 09:52:55

鼠标悬停时显示div

回答

相关问题