方法一：鼠标hover时使用JS给元素添加类名达到切换图片效果

<!-- hover元素 -->
<div class="hover-div"><ul><li class="hover-div-item" data-index="1">当鼠标hover我切换对应的图片1</li><li class="hover-div-item" data-index="2">当鼠标hover我切换对应的图片2</li><li class="hover-div-item" data-index="3">当鼠标hover我切换对应的图片3</li><li class="hover-div-item" data-index="4">当鼠标hover我切换对应的图片4</li></ul>
</div>
<!-- 图片展示 -->
<div class="image-display active-img"><img src="example1.png" alt="Displayed Image">
</div>
<div class="image-display"><img src="example2.png" alt="Displayed Image">
</div>
<div class="image-display"><img src="example3.png" alt="Displayed Image">
</div>
<div class="image-display"><img src="example4.png" alt="Displayed Image">
</div><!-- 样式 -->
<style>.image-display{display: none;}.active-img{display: block !important;}
</style><!-- JS -->
<script>document.addEventListener('DOMContentLoaded', () => {const navItems = document.querySelectorAll('.hover-div-item');const imageDisplay = document.querySelectorAll('.image-display');navItems.forEach(item => {item.addEventListener('mouseenter', () => {imageDisplay.forEach(i => i.classList.remove('active-img'));const divIndex = item.getAttribute('data-index');imageDisplay[divIndex-1].classList.add('active-img');});});});</script>

方法二：使用JS获取hover的元素所带的data-img属性值，赋值给图片src属性达到切换图片效果

<!-- hover元素 -->
<div class="hover-div"><ul><li class="hover-div-item" data-index="1" data-imgsrc="example1.png">当鼠标hover我切换对应的图片1</li><li class="hover-div-item" data-index="2" data-imgsrc="example2.png">当鼠标hover我切换对应的图片2</li><li class="hover-div-item" data-index="3" data-imgsrc="example3.png">当鼠标hover我切换对应的图片3</li><li class="hover-div-item" data-index="4" data-imgsrc="example4.png">当鼠标hover我切换对应的图片4</li></ul>
</div>
<!-- 图片展示 -->
<div class="image-display"><img id="displayed-image" src="example1.png" alt="Displayed Image">
</div><!-- 样式 -->
<style>.image-display{display: block;}</style><!-- JS -->
<script>document.addEventListener('DOMContentLoaded', () => {const navItems = document.querySelectorAll('.hover-div-item');const displayedImage = document.getElementById('displayed-image');navItems.forEach(item => {item.addEventListener('mouseenter', () => {const imgSrc = item.getAttribute('data-imgsrc');displayedImage.src = imageUrl;});});});
</script>

解析：

1. 通过添加类名切换图片（CSS控制）

• 方式：使用 JavaScript 在 hover 事件时给元素添加类名，然后通过 CSS 控制该类名下图片的切换效果。
• 优点：
  • 性能较好：因为图片切换通过 CSS 实现，浏览器的渲染性能较好，尤其是当涉及到复杂动画时，CSS 能更好地利用硬件加速。
  • 解耦：JavaScript 负责事件绑定，CSS 控制样式，避免了将所有逻辑写在 JavaScript 中，使代码结构更清晰。
  • 响应式设计方便：通过 CSS 可以很容易地适配不同的屏幕尺寸和设备。
• 缺点：
  • 灵活性较差，尤其是在动态加载或更复杂的图片切换场景下（如异步加载图片），需要结合更多 JavaScript 代码。

2. 通过 data-imgsrc 属性切换图片（JavaScript控制）

• 方式：使用 JavaScript 在 hover 时获取元素的 data-imgsrc 属性值，然后直接修改目标图片的 src 属性。
• 优点：
  • 灵活性高：可以直接通过 JavaScript 控制图片的切换，适用于需要动态处理的数据（比如从服务器获取的图片或需要根据不同条件加载不同的图片）。
  • 直接控制：如果你需要更复杂的逻辑，比如逐步切换图片、延迟加载或异步图片切换等，JavaScript 方式提供了更多的控制权。
• 缺点：
  • 性能问题：如果操作不当，频繁修改 DOM 可能会影响性能，尤其是在较多图片元素上执行时。
  • 样式耦合度高：直接通过 JavaScript 控制样式，可能使得 HTML 结构与样式紧密耦合，难以维护和扩展。

性能对比：

• CSS 方法的性能通常更优，因为浏览器的渲染引擎对 CSS 动画优化得更好，且无需每次都触发 JavaScript 执行。
• JavaScript 方法可能需要频繁操作 DOM，如果每次 hover 都去修改 src 属性，可能会带来一定的性能开销，尤其是在多个图片的情况下。

总结：

• 优先选择 CSS 方法，如果你的切换需求简单，并且只涉及到预定义的几种样式或图片。CSS 方法在性能上通常更加高效，并且代码结构更清晰。
• 如果你有 动态数据 或 复杂逻辑，比如每次 hover 时需要加载不同的图片，或者图片是异步加载的，使用 JavaScript 切换 src 属性会更合适。

如果可以，最好是将两者结合使用：通过 CSS 实现基本的切换效果，而在需要时通过 JavaScript 动态获取 data-img 属性来加载更复杂的图片。