参见英文答案 >
Speech bubble with arrow2
我为这个问题创造了一个 jsFiddle.
我为这个问题创造了一个 jsFiddle.
a.tip {
position: relative;
}
a.tip span {
display: none;
position: absolute;
top: -5px;
left: 60px;
width: 125px;
padding: 5px;
z-index: 100;
background: #000;
color: #fff;
-moz-border-radius: 5px; /* this works only in camino/firefox */
-webkit-border-radius: 5px; /* this is just for Safari */
}
a:hover.tip {
font-size: 99%; /* this is just for IE */
}
a:hover.tip span {
display: block;
}
<center><a href="http://google.com/" class="tip">Link!<span>Hi its me!</span></a></center>
基本上我在我的网站上有一个工具提示,它显示在我的链接的右边.但是在黑匣子的左手边,我想要一个三角形附在指向链接的框上,是否可以使用CSS？就像这样,但在左边
解决方法
您可以使用CSS,使用
css triangle trick
a.tip span:before{
content:'';
display:block;
width:0;
height:0;
position:absolute;
border-top: 8px solid transparent;
border-bottom: 8px solid transparent;
border-right:8px solid black;
left:-8px;
top:7px;
}
