获取带箭头的矩形框将鼠标悬停在链接中

Question

我试图在链接上悬停一个带箭头的矩形框。

             <a href="//">NAME</a>

在悬停时我试图得到一个带箭头的矩形框。 例如  就像我们在Facebook上悬停的用户名一样，我们将得到一个包含内容的矩形框。

如何为这个申请Css？

Answer 1

据我所知，你的问题非常模糊，我认为你是在something like this之后：

HTML：

<a href="#" title="Hover me!">Hover Me</a>

CSS：

a
{
    display: inline block;
    height: 50px;
    padding: 10px;
    color: #000;    
    background-color: transparent; /*default value, used here to illustrate*/

}

a:hover
{
    background-color: #f00;
}

---

编辑完成后，我们终于明白了！

我的建议是前往this very website并熟悉他们的精彩工具提示。它非常通用且易于实现，只需包含jQuery及其插件，然后设置HTML。

很容易：）

Answer 2

您可以使用css和jquery来实现您的需求。我为此做了一个快速的例子 http://jsbin.com/amaga4

我为链接使用了三个类，mylink一个用于名为mypopup的弹出式div，另一个用于名为mytext的弹出式文本。 mypopup div在css中有display:none来隐藏它。

您可以对mouseover使用jquery和事件mouseleave以及.mylink a，并使用mypopup显示div show()并使用{{隐藏它1}}

CSS

hide()

XHTML

.mylink {width:300px; text-align:right;}
.mylink a {color:#0CF; font-size:20px; text-decoration:none;}
.mypopup {background:url(shape.png) no-repeat; width:300px; height:146px; color:#0CF; display:none;}
.mytext {position:relative; top:40px; left:20px;}

jQuery

<div class="mylink"><a href="#">Here is my link</a></div>
<div class="mypopup"><div class="mytext">The text here</div></div>

Answer 3

我认为我是对的，所以我将这个作为答案发布：您正在寻找的是工具提示，并且有不同的解决方案（有和没有javascript）。我个人最喜欢的是prototip 2。

要准确了解Facebook所做的事情，this会对您有所帮助（基于coda popup bubbles）。

编辑：如果你有一个工具提示并且只是想使用类似于facebook的css，请尝试使用firebug（对于Firefox，在IE中按F12并使用开发人员工具... chrome也有这样的东西，请谷歌）检查html和应用的css规则。