javascript - バブル ツールチップの問題

Question

問題を示すライブ URL の動作:

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

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 を使用しています。

Answer 1

これは、ツールチップがリンク上にあるためです。パディングを確認し、リンクレベルの後ろに配置するためにz-indexを追加するかもしれません=）