Показать DIV на MouseOver

Question

На mouseover можно ли этот div прикрепить к указателю мыши, чтобы его содержимое отображалось при наведении курсора мыши?

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

Если так, то как это сделать?

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>

Когда пользователь наводит мышью на элемент "abc", то это "abc!" div отображается рядом с курсором мыши (и следует за ним).

Answer 2

Попробуй это:

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

Но чтобы это работало, div должен быть виден первым. Тем не менее, если div является hiddne (display:none), то любое событие не сможет найти div, и никакое событие не будет запущено на нем. Сказав это, попробуйте это, которое использует свойство видимости.

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