1

私のdivがこのホバーに表示されない理由がわかりません。助けていただければ幸いです。

$('a[rel=tooltipimage]').bind('mouseover',function(e){
e=e?e:window.event;
$('#tooltip').css({
position:'absolute',
top:e.pageY,
left:e.pageX
});
})

HTML:

</span>
<a href="#" class="tooltipimage"><img src="/applications/images/icons/info_icon.gif"/></a>
</span> 
<div class="tooltip" style="margin:0 0 0 18px; display:none;">
<b>tooltip text goes here</b><br />                                                                 
 </div>

私がやろうとしているのは、マウスオーバーしたときに画像の横に浮かんでいるdivを表示し、離れると消えることだけです。私はjqueryをインストールしましたが、必要なのは最も単純なツールチップだけである場合、たくさんのアドオンやものを入れたくありません。私が古典的なASPにいなければ、モーダルポップアップを使用できましたが、残念ながら運がありませんでした。

前もってありがとう、NickG

4

7 に答える 7

1

HTML の一部を変更できる場合は、JavaScript を使用する必要はありません (位置を動的にする必要がない限り、JavaScript を使用して設定できます)。普通のcssでできます。小さなテキストだけが必要な場合は、いつでもtitle属性を使用できます

デモ

<span class="tooltipimage">
    <a href="#"><img src="/applications/images/icons/info_icon.gif"/></a>
    <label>tooltip text goes here</label>
</span> 


.tooltipimage:hover label{
    display:block;
}

.tooltipimage label{
    display:none;
    position:absolute;
    top:0px;
    left:20px;
}

.tooltipimage{
    display:block;
    position:relative;
}
于 2013-04-05T17:41:10.403 に答える
1

コードは次のようにする必要があります

$('a.tooltipimage').bind('mouseover',function(e){
e=e?e:window.event;
$('.tooltip').css({
position:'absolute',
top:e.pageY,
left:e.pageX
});
})

ツールチップはIDではなくクラスなので

于 2013-04-05T17:19:12.970 に答える
1

あなたの a タグには、 tooltipimageと等しい属性 rel がありません。ただし、tooltipimage という名前のクラスがあります。また、ツールチップを非表示にしていましたが、再び表示することはありませんでした。

次のようにしてください。

デモ

$('a.tooltipimage').bind('mouseover',function(e){
    e=e?e:window.event;
    $('.tooltip').css({
        display: 'block',
        position:'absolute',
        top:e.pageY,
        left:e.pageX
    });
})

HTML の小さなエラーは、2 つの終了 span タグがありますが、開始タグがないことです。

于 2013-04-05T17:22:07.810 に答える
1

コードにはいくつか問題があります。最初は閉じていて開いていません。アンカーspanに間違ったセレクターを使用しており、divにクラスセレクターの代わりにidセレクターを使用しています。すべてのcssをdivに適用したら、それを表示する必要があります。

マークアップ:

<span>
<a href="#" class="tooltipimage"><img src="/applications/images/icons/info_icon.gif"/></a>
</span> 
<div class="tooltip" style="margin:0 0 0 18px; display:none;">
<b>tooltip text goes here</b><br />                                                                 
 </div>

jQuery :

$('.tooltipimage').on('mouseover',function(e)
{
    e=e?e:window.event;
    $('.tooltip').css(
    {
        position:'absolute',
        top:e.pageY,
        left:e.pageX
    }).show();
}).on("mouseout",function(){$('.tooltip').hide()});

jsFiddle : http://jsfiddle.net/vgYeR/

また、ツールチップのように見えるようにmouseoutイベントをバインドしました。

于 2013-04-05T17:24:43.803 に答える
1

あなたのセレクターは間違っています。そのはず

$('a.tooltipimage').bind('mouseover',function(e){
    e = e ? e : window.event;
    $('.tooltip').css({
        position:'absolute',
        top:e.pageY,
        left:e.pageX,
        display: 'block'
    });
});
于 2013-04-05T17:20:31.670 に答える
1

コードにいくつかのエラーがあります。これを試して：

$('a.tooltipimage').hover(function (e) {
    e = e ? e : window.event;
    $('.tooltip').show().css({
        position: 'absolute',
        top: e.pageY,
        left: e.pageX
    })
}, function () {
    $('.tooltip').hide()
});

jsFiddle の例

  • a[rel=tooltipimage]存在しないものを選択していましたが、存在a.tooltipimageします。
  • #tooltipまた、存在しないものを選択していましたが、存在.tooltipします。
  • .bind().on()1.7の時点で推奨されなくなりました
  • 開始スパンタグが正しくありませんが、それは単なるタイプミスだと思います。
  • ツールチップも非表示にしたかったので、.hover()mouseleave でツールチップを非表示にしていました。
于 2013-04-05T17:21:28.117 に答える
-1 
$('a[rel="tooltipimage"]')

引用符が必要だと思います。

于 2013-04-05T17:18:35.787 に答える