jQuery鼠标悬停链接显示隐藏的div

Question

我在extratorrent网站上遇到了mouseover事件，如下图所示。

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保持可见？

Answer 1

鼠标悬停在链接文本上时，将div“hello”的Visiblility设置为可见。 然后在鼠标悬停div“hello”时，您还将div“hello”可见性设置为可见。 在鼠标输出div“你好”时，你将其可见性设置为“隐藏”。 像这样的东西：

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

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

更新：

如评论部分所述，如果鼠标离开第一个div，第二个div将消失。 有很多插件可以让你实现所需的行为。 这个看起来特别好看。

Answer 3

使用简单的HTML：

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

当通过div1你显示div2 ，并在用户进入div2之后隐藏它然后退出：

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

这是一种快速，非最佳的解决方案，但即使两个div不相邻也能正常工作。

Answer 4

用这个

$（document）.on（“click”，“＃test-element”，function（）{}）;

jQuery鼠标悬停链接显示隐藏的div

问题描述

4 个解决方案

解决方案1
12 已采纳 2010-06-26 08:04:14

解决方案2
3 2010-06-26 07:30:52

解决方案3
0 2010-06-26 07:48:07

解决方案4
0 2015-08-19 14:30:53

jQuery鼠标悬停链接显示隐藏的div

问题描述

4 个解决方案

解决方案1 12 已采纳 2010-06-26 08:04:14

解决方案2 3 2010-06-26 07:30:52

解决方案3 0 2010-06-26 07:48:07

解决方案4 0 2015-08-19 14:30:53

解决方案1
12 已采纳 2010-06-26 08:04:14

解决方案2
3 2010-06-26 07:30:52

解决方案3
0 2010-06-26 07:48:07

解决方案4
0 2015-08-19 14:30:53