我试图在鼠标悬停在“a”元素上时显示弹出窗口。
问题是我想在鼠标悬停在弹出元素上时保留弹出窗口，但当鼠标悬停在弹出元素上时弹出窗口消失。
弹出窗口就在<a> 下方元素(在显示器上)。
这是我的代码
HTML:
<ul>
<li>
<a id="test">
<div>
Some text
</div>
<div id="popup">
<ul>
<li><a>text0</a>
</li>
<li><a>text1</a>
</li>
</ul>
</div>
</a>
</li>
<li> TEXT
</li>
</ul>
CSS:
#popup {
display:none;
}
#test:hover #popup {
display:block;
}
我将问题标记为“JAVASCRIPT/JQUERY”，因为如果他们有解决方案，我们将不胜感激。
编辑
这实际上是我的代码，但它不起作用
最佳答案
在开始编码之前，请先查看 jQueryUI 工具提示 (http://jqueryui.com/tooltip/)。 它以最少的编程要求做你想做的事。
来自 doku:
Customizable, themeable tooltips, replacing native tooltips.
例子:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>jQuery UI Tooltip - Default functionality</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css" />
<script>
$(function() {
$( document ).tooltip();
});
</script>
<style>
label {
display: inline-block;
width: 5em;
}
</style>
</head>
<body>
<p><a href="#" title="That's what this widget is">Tooltips</a> can be attached to any element. When you hover
the element with your mouse, the title attribute is displayed in a little box next to the element, just like a native tooltip.</p>
<p>But as it's not a native tooltip, it can be styled. Any themes built with
<a href="http://themeroller.com" title="ThemeRoller: jQuery UI's theme builder application">ThemeRoller</a>
will also style tooltips accordingly.</p>
<p>Tooltips are also useful for form elements, to show some additional information in the context of each field.</p>
<p><label for="age">Your age:</label><input id="age" title="We ask for your age only for statistical purposes." /></p>
<p>Hover the field to see the tooltip.</p>
</body>
</html>
关于javascript - 如何显示弹出窗口，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/18018671/