Show DIV on MouseOver

Q mouseoverCan this div be attached to the mouse pointer so that its contents appear when you hover over the mouse?

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

If so, how is this done?

+3
source share
2 answers
<div onmousemove="position();" onmouseout="hide();">abc</div>
<div id="tip" style="position: fixed; visibility: hidden;">that 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 moves the mouse over the "abc" div, "this is abc!" The div is displayed next to the mouse cursor (and follows it).

+2
source

Try the following:

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

, , div . , div hiddne (display: none), onmoueever div, . , , .

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

Source: https://habr.com/ru/post/1731537/


All Articles