CSS与JavaScript实现鼠标悬停显示部分重叠图片的方法

在网页设计中，为了增强用户体验和视觉效果，经常会用到一些交互效果。其中，鼠标悬停显示部分重叠图片就是一种很实用且吸引人的效果。下面我们就来探讨一下如何使用CSS与JavaScript实现这一效果。

从CSS方面来看。我们需要设置图片的基本样式，包括宽度、高度、定位等。假设我们有两张图片，一张是主图片，另一张是悬停时要显示的重叠图片。我们可以将主图片正常显示，而重叠图片初始状态设置为隐藏。通过CSS的 display:none; 或者 opacity:0; 等属性来实现隐藏效果。

例如：

.main-img {
  width: 300px;
  height: 200px;
}
.overlay-img {
  width: 200px;
  height: 150px;
  position: absolute;
  top: 50px;
  left: 50px;
  display: none;
}

接下来就是JavaScript的部分。我们要通过监听鼠标的悬停事件来控制重叠图片的显示和隐藏。当鼠标悬停在主图片上时，通过JavaScript获取到重叠图片的元素，并将其显示出来；当鼠标移开时，再将其隐藏。

以下是一个简单的JavaScript示例代码：

const mainImg = document.querySelector('.main-img');
const overlayImg = document.querySelector('.overlay-img');

mainImg.addEventListener('mouseover', function() {
  overlayImg.style.display = 'block';
});

mainImg.addEventListener('mouseout', function() {
  overlayImg.style.display = 'none';
});

在实际应用中，我们还可以添加一些过渡效果，让重叠图片的显示和隐藏更加平滑。比如使用CSS的 transition 属性来设置过渡时间和效果。

这种鼠标悬停显示部分重叠图片的方法可以应用在很多场景中。比如产品展示页面，当用户悬停在产品图片上时，显示相关的产品细节图片；或者在图片画廊中，悬停时展示图片的描述信息图片等。

通过CSS与JavaScript的结合，我们能够轻松实现鼠标悬停显示部分重叠图片的效果，为网页增添更多的交互性和趣味性，提升用户的浏览体验。