Question

我在标题中有一个链接id="show"，在页脚中有一个div id="display"。当鼠标悬停在标题区域中的id="display"并且div位于页脚区域时，我想显示div id="show"。

HTML CODE：

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

鼠标悬停时显示div

3 个答案: