Show DIV on MouseOver

Question

On mouseover can this div be attached to the mouse pointer so that its contents are shown on mouseover?

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

If so how is this done?

Answer 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>

When the user mouses over the "abc" div, the "that's abc!" div is shown next to the mouse cursor (and follows it).

Answer 2

Try this:

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

But for that to work, the div should be visible first. However, if the div is hiddne (display:none) then onmoueever event won't be able to find the div and no event will be triggered on it. Having said that, try this which uses visibility property.

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