图像悬停联动文本切换：JavaScript 实现指南-小浪学习网

图像悬停联动文本切换：JavaScript 实现指南

本文档详细介绍了如何使用 JavaScript 实现当鼠标悬停在不同图像上时，动态改变下方文本内容的效果。通过监听鼠标事件，并结合 css 控制文本的显示与隐藏，提供了一种简单有效的解决方案，适用于需要在图像交互时展示不同信息的场景。

在网页设计中，经常会遇到需要根据用户的交互行为来动态改变页面内容的需求。其中一种常见的交互方式是当用户将鼠标悬停在某个元素上时，改变另一个元素的内容或样式。本文将介绍如何使用 javascript 实现当鼠标悬停在不同图像上时，动态改变下方文本内容的效果。

html 结构

首先，我们需要定义 HTML 结构。包含一组图像元素和一个用于显示文本内容的区域。为了方便 JavaScript 操作，我们需要为每个图像元素设置唯一的 id 属性，并为每个文本内容区域设置 class 属性。

<div>   @@##@@   @@##@@   @@##@@ </div>  <div class="text">   <p>This is the first image text</p> </div>  <div class="text">   <p>This is the second image text</p><p><span>立即学习</span>“<a href="https://pan.quark.cn/s/c1c2c2ed740f" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">Java免费学习笔记（深入）</a>”；</p> </div>  <div class="text">   <p>This is the third image text</p> </div>

CSS 样式

接下来，我们需要使用 CSS 来控制文本内容的初始显示状态。默认情况下，我们希望所有文本内容区域都是隐藏的。

.text {   display: none; }

JavaScript 代码

现在，我们可以使用 JavaScript 来实现交互逻辑。首先，我们需要获取所有图像元素和文本内容区域的引用。然后，我们为每个图像元素添加 mouseover 和 mouseout 事件监听器。当鼠标悬停在图像上时，显示对应的文本内容区域；当鼠标离开图像时，隐藏对应的文本内容区域。

const img = document.querySelectorAll('img'); const text = document.querySelectorAll('.text');  img.foreach((element) => {   element.addEventListener('mouseover', () => {     switch (element.id) {       case "img1":         text[0].style.display = "block";         break;       case "img2":         text[1].style.display = "block";         break;       case "img3":         text[2].style.display = "block";         break;     }   });    element.addEventListener('mouseout', () => {     switch (element.id) {       case "img1":         text[0].style.display = "none";         break;       case "img2":         text[1].style.display = "none";         break;       case "img3":         text[2].style.display = "none";         break;     }   }); });

代码解释

document.querySelectorAll(‘img’) 和 document.querySelectorAll(‘.text’) 用于获取所有图像元素和文本内容区域的引用。
img.forEach((element) => { … }) 遍历所有图像元素，并为每个元素添加事件监听器。
element.addEventListener(‘mouseover’, () => { … }) 和 element.addEventListener(‘mouseout’, () => { … }) 分别用于监听鼠标悬停和鼠标离开事件。
switch (element.id) { … } 根据图像元素的 id 属性来判断应该显示哪个文本内容区域。
text[0].style.display = “block” 和 text[0].style.display = “none” 分别用于显示和隐藏文本内容区域。

注意事项