在 MouseOver 上显示 DIV答案

【问题标题】：Show DIV on MouseOver在 MouseOver 上显示 DIV
【发布时间】：2010-02-05 11:30:29
【问题描述】：

在mouseover 上，这个 div 是否可以附加到鼠标指针上，以便在鼠标悬停时显示其内容？

<div id='show' style='display:none;'></div>

如果是这样，这是怎么做到的？

【问题讨论】：

标签： javascript html css

【解决方案1】：

<div onmousemove="position();" onmouseout="hide();">abc</div>
<div id="tip" style="position: fixed; visibility: hidden;">that's abc!</div>
<script type="text/javascript">
  function position() {
    var d = document.getElementById('tip');
    d.style.visibility = 'visible';
    d.style.left = event.screenX + 'px';
    d.style.top = event.screenY + 'px';
  }
  function hide() {
    document.getElementById('tip').style.visibility = 'hidden';
  }
</script>

当用户将鼠标悬停在“abc”div 上时，“that's abc!” div 显示在鼠标光标旁边（并跟随它）。

【讨论】：

k.你能告诉我这段代码有什么问题吗.. var ele=document.getElementById('show'); document.getElementById('show').innerHTML = el.innerHTML; ele.width='200px'; ele.height='30px'; ele.bgcolor='#a9a9a9'; ele.color='#fff'; ele.position='绝对'; ele.display='块'; $(window).mouseover(function(event) { $("#show").css({'top': event.pageY, 'left': event.pageX}); $('#show').height ();});
event.screenX + 'py' 应该是 event.screenY + 'px'
@Hulk：该代码的问题在于它没有格式化并且无法阅读。不过，更严重的是，el 没有定义，您正在混合使用 jQuery 和纯 javascript 代码 - 您是否加载了 jQuery？此外，height() 调用什么也不做。 @Mic：谢谢；固定。
不应该使用ele.style.width、ele.style.height等吗？还有绿巨人，请为此提出一个新问题。

【解决方案2】：

试试这个：

<div id='show' onmouseover="this.style.display = 'block';"></div>

但要使其正常工作，div 应该首先可见。但是，如果 div 是隐藏的 (display:none)，则 onmoueever 事件将无法找到该 div，并且不会在其上触发任何事件。话虽如此，请尝试使用 visibility 属性。

<div id='show' onmouseover="this.style.visibility = 'visible';"  onmouseout="this.style.visibility = 'hidden';"></div>

【讨论】：