javascript - 鼠标悬停不正确

Question

我想将鼠标悬停在文本"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>

Answer 1

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');
});

OR

For just show-hide you can do:

$('.me').hover(function() {
  $('#toolTipDiv').toggle()
});

Answer 2

我建议使用 jQuery！

您的 tooltipDiv 应该具有display: noneCSS 属性，然后使用：

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

如果您的 tooltipDiv 显示在“我”文本上，那么您遇到了问题，因为触发了 onmouseout 事件。不知道您的工具提示出现在哪里！