jQuery mouseover 显示隐藏的 div 并在只有鼠标仍在 div 上时显示 div答案

【问题标题】：jQuery mouseover to show hidden div and to show div if only mouse still over the divjQuery mouseover 显示隐藏的 div 并在只有鼠标仍在 div 上时显示 div
【发布时间】：2014-12-17 04:43:38
【问题描述】：

我的 mouseover 和 mouseout 功能有问题。当我将鼠标悬停在链接上时，它会显示一个隐藏的<div>，当我将鼠标移出 div 时，它会隐藏 div。问题是，如果我将鼠标悬停在链接上，然后我将鼠标移动到不在 div 上方的其他地方，则 div 不会消失。

如果我使用链接的 mouseout 事件来设置 div 的可见性，那么我将无法将鼠标悬停在 div 上。

这是我的 HTML：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>
            Untitled Document
        </title>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js">
        </script>
        <script type="text/javascript">
            $(document).ready(function() {
                $("#show_div").mouseover(function() {
                    $("#hello").css('visibility', 'visible');
                });

                $("#hello").mouseover(function() {
                    $("#hello").css('visibility', 'visible');
                });
                $("#hello").mouseout(function() {
                    $("#hello").css('visibility', 'hidden');
                });
            });
        </script>
    </head>

    <body>
        <br/>
        <br/>
        <br/>
        <br/>
        <a id="show_div" href="#">Link text</a>
        <div id="hello" style="visibility:hidden;">
            <ul>
                <li>
                    Coffee
                </li>
                <li>
                    Tea
                </li>
                <li>
                    Milk
                </li>
            </ul>
        </div>
        <br/>
        <br/>
    </body>    
</html>

【问题讨论】：

您希望 div 在隐藏时实际占用页面空间，还是像 <select> 下拉菜单那样显示在页面顶部？
我认为 div 应该出现在顶部。也许，他可以为此设置 z-index。
是的，我希望它出现在顶部。

标签： jquery html sitedesign

【解决方案1】：

我使用 setTimeout 函数来更改 css 属性。将 setTimeout 的间隔设置为 ~333-500 毫秒，并将鼠标悬停设置为 Div 以清除超时。然后，在 div 本身的 mouseout 上，再次设置计时器 :)

示例/答案：

// timer for hiding the div
var hideTimer;

// show the DIV on mouse over
$("#show_div").mouseover(function() {
    // forget any hiding events in timer
    clearTimeout( hideTimer );
    $("#hello").css('visibility', 'visible');
});

$("#hello").mouseover(function() {
    clearTimeout( hideTimer );
    $("#hello").css('visibility', 'visible');
});

// set a timer to hide the DIV
$("#show_div").mouseout(function() {
    hideTimer = setTimeout( hideHello, 333 );
});

$("#hello").mouseout(function() {
    hideTimer = setTimeout( hideHello, 333 );
});

// hides the DIV
function hideHello() {
    $("#hello").css('visibility', 'hidden');
}

【讨论】：

我已经编辑了我的答案，以便为您提供源代码。我不是 100% 了解 jQuery 部分，因为我使用的是直接 javascript，但直接 javascript 应该可以工作 :) 如果您对此有任何疑问，我将非常乐意为您解答。
abelito - OP 的代码在 jQuery 的 ready() 函数中运行，因此您或许应该指出 hideHello() 需要位于全局命名空间中，否则您需要更改setTimeout() 函数接收对 hideHello 的本地引用
@abelito - 永远不会，ever 将字符串传递给setTimeout()，您可以直接执行setTimeout(hideHello, 333 );，这既a）更快又b）消除了许多副作用，就像@patrick所说的那样。
@patrick,Nick Craver - 注意到了，谢谢你们的知识。我已将上面的代码更改为使用 hideHello 。
感谢您的评论和回答。

【解决方案2】：

将整个东西放在一个容器中，然后在上面放置鼠标事件：

试试看：http://jsfiddle.net/hGTPp/

HTML

<div id='container'>
    <a id="show_div" href="#">Link text</a>
    <div id="hello" style="visibility:hidden;">
        <ul>
            <li>
                Coffee
            </li>
            <li>
                Tea
            </li>
            <li>
                Milk
            </li>
        </ul>
    </div>
</div>

jQuery

$("#container").mouseover(function() {
    $("#hello").css('visibility', 'visible');
});
$("#container").mouseout(function() {
    $("#hello").css('visibility', 'hidden');
});

【讨论】：

+1 - 这是我要走的路线，除非display:none; 是一个选项，在这种情况下你可以进一步简化它：jsfiddle.net/hGTPp/2
@Nick: +1 toggle() 如果可能的话会更好。
@Bayonian - 不确定仅仅因为 div 是动态添加的会有什么不同，但无论如何，当我回到您的原始代码时，我实际上并没有任何问题，只需添加mouseout 到 show_div。 jsfiddle.net/SuqxY
@Morron - 可能与您的 CSS 布局有关。如果可能应用了保证金。您是否有理由不能像我在上面的回答中那样将 <a> 和 <div> 包装在容器中？

【解决方案3】：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>
            Untitled Document
        </title>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js">
        </script>
        <script type="text/javascript">
            $(document).ready(function() {
                $("#show_div").hover(
                  function(){
                    $('#hello').show();
                  },
                  function(){
                    $('#hello').hide();
                  });
            });
        </script>
    </head>

    <body>
        <br/>
        <br/>
        <br/>
        <br/>
        <div id="show_div">
            <a href="#">Link text</a>
            <ul id="hello" style="display:none;">
                <li>
                    Coffee
                </li>
                <li>
                    Tea
                </li>
                <li>
                    Milk
                </li>
            </ul>
        </div>
        <br/>
        <br/>
    </body>

</html>

【讨论】：

【解决方案4】：

请改用.hover()。它允许您指定handlerIn 和handlerOut 事件。例如

jQuery

<script type="text/javascript">
  $(document).ready(function() {
    $("#linkdiv").hover(function() {
      $("#hello").show();
    }, function() {
      $("#hello").hide();
    });
  });
</script>

HTML

<div id="linkdiv">
  <a id="show_div" href="#">Link text</a>

  <div id="hello" style="display: none;">
    <ul>
      <li>Coffee</li>
      <li>Tea</li>
      <li>Milk</li>
    </ul>
  </div>
</div>

编辑：在尼克的评论之后稍微更改了代码。谢谢尼克。

【讨论】：

实际上它们是mouseenter 和mouseleave 事件...但<div> 不是<a> 的子，所以这不会'不在这里工作。
正如尼克所说，要完成这项工作，您需要将它们都放在一个容器中。您始终可以在添加 DIV 后立即连接事件处理程序。

【解决方案5】：

CSS 解决方案：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <style>
    #link{
      display:inline-block;
      overflow:hidden;
      height:20px;
    }
    #link:hover{
      height:auto;           
    }
  </style>
</head>
<body>
  <br />
  <div id="link">
    <a href="#">Link text</a>
    <ul>
      <li>
          Coffee
      </li>
      <li>
          Tea
      </li>
      <li>
          Milk
      </li>
    </ul>
  </div>
</body>
</html>

【讨论】：

【解决方案6】：

$(document).ready(function()
{
    var timer;
    $("#show_div").hover(
        function ()
        {
            $('#hello').show();
        },
        function()
        {
            timer = setTimeout(function(){$('#hello').hide();}, 5000);
        }
    );

    $("#hello").hover(
        function ()
        {
            clearTimeout(timer);
        },
        function()
        {
            $('#hello').show();
        }
    );
}

【讨论】：