jQuery mouseover 链接显示隐藏的 div答案

【问题标题】：jQuery mouseover link to show hidden divjQuery mouseover 链接显示隐藏的 div
【发布时间】：2011-03-08 13:45:58
【问题描述】：

我在extratorrent网站上遇到了鼠标悬停事件，如下图所示。

alt text http://img3.imageshack.us/img3/4516/usercommment999.jpg

当您将鼠标悬停在用户名链接上时，它会显示一个隐藏的 div。非常整洁和光滑。

我是 jQuery 的新手。谁能告诉我如何在正确的轨道上开始做这件事？谢谢。

更新 1：

我写了类似下面的东西试图得到结果。问题是，当我将鼠标移出链接时，Div 不会保留，它会立即消失。

<!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'); });
    $("#show_div").mouseout(function() { $("#hello").css('visibility','hidden'); });


        });
        </script>

    </head>

    <body>

    <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>


    </body>
    </html>

当鼠标悬停在 Div 上时，如何使 Div 保持可见？

【问题讨论】：

标签： jquery html sitedesign

【解决方案1】：

当鼠标悬停在链接文本上时，您将 div "hello" 的 Visiblility 设置为可见。然后在将鼠标悬停在 div "hello" 上时，您还将 div "hello" 可见性设置为可见。在 div "hello" 的 mouseout 上，您将其可见性设置为 "hidden"。像这样的：

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

【讨论】：

所以，它需要 3 个步骤..谢谢。
我需要实现类似的东西，并在#show_div 中添加了一个 mouseout。 $("#show_div").mouseout(function() { $("#hello").delay("fast").css('visibility','hidden');});这个想法是列表项应该在延迟后消失，但这不起作用。如果我取消延迟，一旦鼠标离开链接，列表项就会消失。随着延迟，列表项永远不会消失。知道为什么吗？谢谢！！！
我对此进行了更多研究，结果发现为了使其正常工作，我需要这样做： $("#show_div").mouseout(function() { setTimeout(function ( ) {$("#hello").css('visibility','hidden');}, 200); });

【解决方案2】：

您可以使用.hover 函数：

$(function() {
    $('#divOne').hover(function() { 
        $('#divTwo').show(); 
    }, function() { 
        $('#divTwo').hide(); 
    });
});

你有两个 div 的地方：

<div id="divOne">div one</div>
<div id="divTwo" style="display: none;">div two</div>

更新：

如 cmets 部分所述，如果鼠标离开第一个 div，第二个 div 将消失。有many plugins out there 可以让您实现所需的行为。 This one 看起来特别好看。

【讨论】：

问题是如果用户将鼠标移动到新显示的divTwo 中，当鼠标离开divOne 时它会从它们下方消失。不是一个理想的用户体验。
请参阅问题中的更新 1。
@Morron：请参阅答案中的更新 1。

【解决方案3】：

使用简单的 HTML：

<div class="div1">Hover me</div>
<div class="div2" style="display: none">Hi, there</div>

当通过div1 时，你会显示div2，并且只有在用户进入它然后退出后才隐藏它：

<script type="text/javascript">
$('.div1').hover(function() {$('.div2').show()});
$('.div2').hover(function() {}, function() {$('.div2').hide()});    
</script>

这是一种快速的非最佳解决方案，但即使两个 div 不相邻也可以使用。

【讨论】：