如何利用onmouseover实现网格图片悬停时固定区域切换预定义描述文本？

其实核心逻辑特别直白：给每张图片绑定鼠标悬停事件，触发时把对应的描述文本同步到左侧的固定描述框里就行。我给你写个完整的可运行示例，你对照着改改就能用：

1. HTML结构 #

先搭好基础布局：左侧固定的描述框，右侧网格区域放图片。我给每张图片加了data-desc属性来存对应的描述文本（比单独写JS变量更灵活，维护起来也方便）：

<div class="container">
  <!-- 左侧固定描述框 -->
  <div id="desc-box" class="desc-box">
    请悬停图片查看描述
  </div>
  <!-- 右侧图片网格 -->
  <div class="image-grid">
    <img src="lake.jpg" alt="湖泊" data-desc="这是一片静谧的湖泊，湖水清澈见底，周围环绕着翠绿的山林。">
    <img src="duck.jpg" alt="鸭子" data-desc="A duck is an animal that loves swimming in lakes and ponds, quacking loudly to communicate.">
    <img src="mountain.jpg" alt="山脉" data-desc="巍峨的山脉直插云霄，山顶常年覆盖着皑皑白雪，是徒步爱好者的天堂。">
  </div>
</div>

2. CSS布局 #

简单写个布局，让描述框固定在左侧，右侧图片按网格排列：

.container {
  display: flex;
  gap: 20px;
  padding: 20px;
}

.desc-box {
  position: fixed;
  left: 20px;
  top: 20px;
  width: 250px;
  height: 300px;
  padding: 15px;
  background-color: #f0f0f0;
  border-radius: 8px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.image-grid {
  margin-left: 280px; /* 给左侧描述框留空间 */
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 15px;
}

.image-grid img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  cursor: pointer;
  transition: transform 0.2s;
}

.image-grid img:hover {
  transform: scale(1.05);
}

3. JavaScript逻辑 #

获取描述框元素，然后给每张图片绑定onmouseover事件，触发时把图片的data-desc内容更新到描述框里：

// 获取描述框元素
const descBox = document.getElementById('desc-box');
// 获取所有图片元素
const images = document.querySelectorAll('.image-grid img');

// 给每张图片绑定鼠标悬停事件
images.forEach(img => {
  img.onmouseover = function() {
    // 把当前图片的描述文本赋值给描述框
    descBox.textContent = this.dataset.desc;
  };
  
  // 可选：鼠标离开时恢复默认文本
  img.onmouseout = function() {
    descBox.textContent = '请悬停图片查看描述';
  };
});

额外优化：用事件委托更高效 #

如果你的图片是动态加载的（比如后期通过JS添加），用事件委托会更省心，不用给每张图片单独绑定事件：

const descBox = document.getElementById('desc-box');
const imageGrid = document.querySelector('.image-grid');

imageGrid.addEventListener('mouseover', function(e) {
  // 确认触发事件的是图片元素
  if (e.target.tagName === 'IMG') {
    descBox.textContent = e.target.dataset.desc;
  }
});

imageGrid.addEventListener('mouseout', function(e) {
  if (e.target.tagName === 'IMG') {
    descBox.textContent = '请悬停图片查看描述';
  }
});

这样不管后期加多少图片，都不用修改JS代码，直接给图片加data-desc属性就行~

内容的提问来源于stack exchange，提问作者Jack Bashed