JavaScript 实现鼠标悬停显示弹框 - 简单示例

#myPopup {
  display: none;
  position: absolute;
  top: 50px;
  left: 50px;
  width: 200px;
  height: 100px;
  background-color: #fff;
  border: 1px solid #ccc;
  padding: 10px;
}

var myDiv = document.getElementById('myDiv');
var myPopup = document.getElementById('myPopup');

myDiv.addEventListener('mouseover', function() {
  myPopup.style.display = 'block';
});

myDiv.addEventListener('mouseout', function() {
  myPopup.style.display = 'none';
});

首先，我们在HTML中定义了两个 div，一个是我们要鼠标放上去的 div，另一个是弹框。弹框的 CSS 设置了一些基本样式，包括隐藏、位置、大小、背景色、边框和内边距。

然后，我们在 JavaScript 中获取了两个 div 的元素，并使用 addEventListener 方法添加了鼠标移入和移出事件。当鼠标移入 myDiv 时，我们将 myPopup 的 display 属性设置为 'block'，使其显示出来；当鼠标移出 myDiv 时，我们将 myPopup 的 display 属性设置为 'none'，使其隐藏起来。