泡泡工具提示出现问题

时间:2011-03-09 22:34:41

标签: javascript jquery html css bubble-popup

显示问题的工作实时网址:

http://69.24.73.172/demos/newDemo/test.html

enter image description here HTML

<div class="small-vote">
    <a href="#" class="s plus-one bubble" bubble=":)&lt;br /&gt;Vote this comment up&lt;br /&gt;if you like it!"></a>
    <a href="#" class="s minus-one bubble" bubble=":(&lt;br /&gt;Vote this comment down&lt;br /&gt;if you disagree with it!"></a>
</div>

这是所有主流浏览器的问题。如果鼠标进入锚链的下半部分,那就没关系了。它会突出显示它,弹出窗口,您可以单击该链接。

如果您输入链接的上半部分,则可以单击它直到鼠标移动1个像素,然后链接停用,您必须退出并重新进入该区域才能单击它。

使锚链接非常不可用是一个问题。

CSS

a.bubble:hover
{
    background-color:Red;
}
.s{
    background-image:url('../images/sprites.png');
    background-repeat:no-repeat;
}
.plus-one
{
    display:block;
    width:20px;
    height:16px;
    background-position: -46px -135px;
    float:left;
    margin-right:1px;
    margin-top:1px;
}
.minus-one
{
    display:block;
    width:20px;
    height:16px;
    background-position: -67px -135px;
    float:right;
    margin-left:1px;
    margin-top:1px;
}
.minus-one:hover
{
        background-position: -67px -153px;
}
.plus-one:hover
{
    background-position: -46px -153px;
}

作为参考,当弹出框从锚链接中取出时,链接表现正常。我正在使用jQuery Bubble Popup v.2.3.1。

1 个答案:

答案 0 :(得分:2)

那是因为您的工具提示已超过链接!检查填充,可能添加一些z-index将其置于链接级别=)

之后

Elements with border