0

テキスト「Me」にカーソルを合わせると、 「You」がポップアップ表示されます。

<div class="relative"> 
<p onmouseover="document.getElementById('toolTipDiv').className='activeToolTip'"
onmouseout="document.getElementById('toolTipDiv').className='idleToolTip'">Me<p/>
<div id="toolTipDiv" class="idleToolTip">You.</div>
</div>
4

2 に答える 2

0

HTML

<p class="me">Me</p>
<div id="activeToolTip">You</div>

jQuery

$('.me').hover(function() {
  $('#toolTipDiv').removeClass('idleToolTip').addClass('activeToolTip');
}, function(){
  $('#toolTipDiv').removeClass('activeToolTip').addClass('idleToolTip');
});

また

show-hide だけの場合は、次のことができます。

$('.me').hover(function() {
  $('#toolTipDiv').toggle()
});
于 2012-08-08T10:20:52.610 に答える
0

jQueryの使用をお勧めします！

tooltipDiv はdisplay: noneCSS プロパティとして持つ必要があり、次を使用します。

<p onmouseover="$('#toolTipDiv').show();"
onmouseout="$('#toolTipDiv').hide();">Me<p/>

tooltipDiv が「Me」テキストの上に表示される場合、onmouseout イベントが発生するため問題があります。ツールチップがどこに表示されるかわからない!

于 2012-08-08T10:13:53.033 に答える