当鼠标移到链接上时，如何在链接旁边创建弹出框？
当鼠标移到链接上时，如何在链接旁边创建弹出框？
提问于 2012-05-15 00:03:44
下面是我想要实现的：
我的网页上显示了两个超链接：
<a href="http://foo.com"> foo </a>
<a href="http://bar.com"> bar </a>我还有两个链接描述为div：
<div id="foo">foo means foo</div>
<div id="bar">bar means bar</div>现在，当我将鼠标移到foo的链接上时，应该会弹出相应的描述div，并且应该会在光标所在的位置旁边弹出。
因此，如果我将鼠标放在"foo“上，一个包含"foo意思是foo”的弹出框应该会出现在鼠标光标的旁边。同样的情况也适用于"bar“。
请使用javascript/jquery、CSS或它们的组合，展示一种快速而简单的实现方法。
另外，我为之前没有解释清楚而道歉，我实际上想在描述div中添加更多的链接或图像，而不是纯文本，所以常规的工具提示可能不能做到。
谢谢。
回答 2
Stack Overflow用户
回答已采纳
发布于 2012-05-15 00:16:41
这是最简单的解决方案。
HTML：
<a href="http://foo.com" data-tooltip="#foo">foo</a>
<a href="http://bar.com" data-tooltip="#bar">bar</a>
<div id="foo">foo means foo</div>
<div id="bar">bar means bar</div>CSS：
div {
position: absolute;
display: none;
...
}JavaScript：
$("a").hover(function(e) {
$($(this).data("tooltip")).css({
left: e.pageX + 1,
top: e.pageY + 1
}).stop().show(100);
}, function() {
$($(this).data("tooltip")).hide();
});
$("a").hover(function(e) {
$($(this).data("tooltip")).css({
left: e.pageX + 1,
top: e.pageY + 1
}).stop().show(100);
}, function() {
$($(this).data("tooltip")).hide();
});div {
position: absolute;
display: none;
border: 1px solid green;
padding:5px 15px;
border-radius: 15px;
background-color: lavender;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<a href="http://foo.com" data-tooltip="#foo">foo</a>
<a href="http://bar.com" data-tooltip="#bar">bar</a>
<div id="foo">foo means foo</div>
<div id="bar">bar means bar</div>
http://jsfiddle.net/8UkHn/演示：
Stack Overflow用户
发布于 2012-05-15 00:08:44
您是否考虑过在这种情况下使用"title“属性？
<a href="http://foo.com" title="foo means foo"> foo </a>看看这是否适合你的需要。
它的作用是，当您将鼠标移到链接"foo“上时，一个包含"foo意思是foo”的小方框将出现在鼠标指针旁边。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/10586962
复制相关文章
相似问题
腾讯云开发者
