如何在鼠标悬停在链接旁边创建弹出框？ [英] How to create popup boxes next to the links when mouse over them?

问题描述

这里是我要实现的：

我有两个超链接显示在网页上：

 < a href =http://foo.com> foo< / a> 
 
< a href =http://bar.com> bar< / a> 
  

我还有两个链接描述为div：

 < div id =foo> foo表示foo< / div> 
 
< div id =bar> bar表示bar< / div> 
  

现在，当我将鼠标悬停在foo的链接上时，应弹出相应的描述div

因此，如果我将鼠标悬停在foo上，包含foo means foo的弹出框应该会出现在下一个到鼠标光标。同样的事情也适用于bar。

请使用javascript / jquery，CSS或这些的组合显示一个简单快捷的方法来实现。

PS我之前没有清楚地解释道歉，我想添加更多的链接或图像到描述div而不是纯文本，所以一个常规的工具提示可能不会。

感谢。

解决方案

这是最简单的解决方案。

 < a href =http://foo.com tooltip =＃foo> foo< / a> 
< a href =http://bar.comdata-tooltip =＃bar>栏< / a> 
 
< div id =foo> foo意味着foo< / div> 
< div id =bar> bar表示栏< / div> 
  

  div {
 position：absolute; 
 display：none; 
 ... 
} 
  

JavaScript：

  $（a）。hover（function（e）{
 $（$） data（tooltip））。css（{
 left：e.pageX + 1，
 top：e.pageY + 1 
}）stop。 
}，function（）{
 $（$（this）.data（tooltip））hide（）; 
} 
  

DEMO： http://jsfiddle.net/8UkHn/

Here is what I want to implement:

I have two hyperlinks that are displayed on the webpage:

<a href="http://foo.com"> foo </a>

<a href="http://bar.com"> bar </a>

and I also have two descriptions to the links as divs:

<div id="foo">foo means foo</div>

<div id="bar">bar means bar</div>

Now, when I mouse over the link of foo, the corresponding description div should pop up, and it should pop up right next to where my cursor is.

So if I mouse over "foo", a pop-up box containing "foo means foo" should appear right next to the mouse cursor. Same thing applies to "bar".

Please show a quick and simple way to implement this, with javascript/jquery, CSS, or combination of these.

P.S. I apologize for didn't explain clearly earlier, I actually want to add further links or images into the description div instead of pure text so a regular tool-tip perhaps would not do.

Thanks.

解决方案

Here is the simpliest solution.

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();
});

​DEMO: http://jsfiddle.net/8UkHn/

这篇关于如何在鼠标悬停在链接旁边创建弹出框？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！