javascript - Show DIV on MouseOver - Stack Overflow

admin管理员组

文章数量:1318579

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?

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?

• javascript
• html
• css

Share Improve this question Follow edited Feb 5, 2010 at 13:21 Sampson 269k7676 gold badges545545 silver badges568568 bronze badges asked Feb 5, 2010 at 11:30 HulkHulk 34.2k6464 gold badges150150 silver badges217217 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 2

<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).

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>

本文标签： javascriptShow DIV on MouseOverStack Overflow