javascript - 使用 "onmouseover"的描述框

Question

我在玩onmouseover javascript中的事件

我想弹出一个小框，直到没有onmouseover不再

我认为它被称为描述框，但我不确定。

当我将鼠标放在某些文本上时，如何让一个带有自定义文本的小框弹出，并在我将鼠标移动到另一个对象时消失..？

Answer 1

假设 popup是您的“描述框”的 ID:

HTML

<div id="parent"> <!-- This is the main container, to mouse over -->
<div id="popup" style="display: none">description text here</div>
</div>

JavaScript

var e = document.getElementById('parent');
e.onmouseover = function() {
  document.getElementById('popup').style.display = 'block';
}
e.onmouseout = function() {
  document.getElementById('popup').style.display = 'none';
}

或者，您可以完全摆脱 JavaScript，而只使用 CSS:

CSS

#parent #popup {
  display: none;
}

#parent:hover #popup {
  display: block;
}