jQuery 鼠标悬停链接以显示隐藏的 div
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3123049/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery mouseover link to show hidden div
提问by Narazana
I came across the mouseover event on extratorrent site like the following image.
我在 extratorrent 网站上遇到了鼠标悬停事件，如下图所示。
alt text http://img3.imageshack.us/img3/4516/usercommment999.jpg
替代文字 http://img3.imageshack.us/img3/4516/usercommment999.jpg
When you hover the mouse over the username link, it shows a hidden div. Pretty neat and slick.
当您将鼠标悬停在用户名链接上时，它会显示一个隐藏的 div。相当整洁和光滑。
I'm new to jQuery.Can anyone show me how to get start on the right track to do that? Thanks.
我是 jQuery 的新手。有人能告诉我如何走上正确的道路吗？谢谢。
Update 1:
更新 1：
I wrote something like the following attempting to get the result. The problem is that when I mouse the mouse out the link the Div wont stay, it disappear immediately.
我写了类似下面的东西试图得到结果。问题是，当我将鼠标移出 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>
What to do to make Div stay visible when mouse over the Div?
当鼠标悬停在 Div 上时，如何使 Div 保持可见？
采纳答案by Angkor Wat
When mouseover the Link text, you set the Visiblility of the div "hello" to visible. Then on mouseover the div "hello", you also set div "hello" visibility to visible. On mouseout of the div "hello" you set its visibility to "hidden". Something like this:
当鼠标悬停在链接文本上时，您将 div "hello" 的可见性设置为可见。然后在将鼠标悬停在 div“hello”上时，您还将 div“hello” 可见性设置为可见。在鼠标移出 div“hello”时，您将其可见性设置为“隐藏”。像这样的东西：
$("#show_div").mouseover(function() { $("#hello").css('visibility','visible'); });
$("#hello").mouseover(function() { $("#hello").css('visibility','visible'); });
$("#hello").mouseout(function() { $("#hello").css('visibility','hidden'); });
回答by Darin Dimitrov
You could use the .hoverfunction:
你可以使用.hover函数：
$(function() {
$('#divOne').hover(function() {
$('#divTwo').show();
}, function() {
$('#divTwo').hide();
});
});
where you have the two divs:
你有两个 div：
<div id="divOne">div one</div>
<div id="divTwo" style="display: none;">div two</div>
UPDATE:
更新：
As mentioned in the comments section the second div will disappear if the mouse leaves the first. There are many plugins out therethat would allow you to achieve the desired behavior. This onelooks particularly nice.
回答by Iacopo
With a simple HTML:
使用简单的 HTML：
<div class="div1">Hover me</div>
<div class="div2" style="display: none">Hi, there</div>
When passing over div1you show div2, and hide it only after the user get inside it and then exit:
当div1你通过时显示div2，只有在用户进入它然后退出后才隐藏它：
<script type="text/javascript">
$('.div1').hover(function() {$('.div2').show()});
$('.div2').hover(function() {}, function() {$('.div2').hide()});
</script>
This is a quick, non optimal solution, but will work even if the two divs are not adjacent.
这是一个快速的、非最佳的解决方案，但即使两个 div 不相邻也能工作。
回答by Burak Durmu?
USE TH?S
$(document).on("click","#test-element",function() {});
USE TH?S
$(document).on("click","#test-element",function() {});
