js事情绑定 鼠标悬浮出现遮罩层，鼠标离开遮罩层收起

如果你想使用JavaScript来实现鼠标悬浮出现遮罩层，鼠标离开遮罩层收起的效果，可以使用事件绑定和样式操作来实现。以下是一种实现方法：

HTML部分：

<div class="image-container">
  <img src="image.jpg" alt="图片">
  <div class="overlay"></div>
</div>

CSS部分：

.image-container {
  position: relative;
  display: inline-block;
}

.overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  opacity: 0;
  transition: opacity 0.3s ease;
}

JavaScript部分：

var imageContainer = document.querySelector('.image-container');
var overlay = document.querySelector('.overlay');

imageContainer.addEventListener('mouseenter', function() {
  overlay.style.opacity = '1';
});

imageContainer.addEventListener('mouseleave', function() {
  overlay.style.opacity = '0';
});

在JavaScript中，我们首先通过document.querySelector()方法获取到图片容器和遮罩层的元素节点。然后，使用addEventListener()方法为图片容器绑定mouseenter和mouseleave事件的监听器。

当鼠标进入图片容器时，mouseenter事件触发，监听器内部将遮罩层的透明度设置为1，即完全不透明。当鼠标离开图片容器时，mouseleave事件触发，监听器内部将遮罩层的透明度设置为0，即完全透明。

这样就实现了鼠标悬浮出现遮罩层，鼠标离开遮罩层收起的效果。需要注意的是，JavaScript代码应该放在HTML文件中图片容器和遮罩层的代码之后，或者在DOM加载完成后执行。