在网页设计中，经常会遇到需要根据用户的交互行为来动态改变页面内容的需求。其中一种常见的交互方式是当用户将鼠标悬停在某个元素上时，改变另一个元素的内容或样式。本文将介绍如何使用 javascript 实现当鼠标悬停在不同图像上时，动态改变下方文本内容的效果。
HTML 结构
首先，我们需要定义 HTML 结构。包含一组图像元素和一个用于显示文本内容的区域。为了方便 JavaScript 操作，我们需要为每个图像元素设置唯一的 id 属性，并为每个文本内容区域设置 class 属性。
@@##@@ @@##@@ @@##@@This is the first image text
This is the second image text
立即学习“Java免费学习笔记（深入）”；
This is the third image text
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" 分别用于显示和隐藏文本内容区域。
注意事项
- 确保每个图像元素都有唯一的 id 属性。
- 确保文本内容区域的数量与图像元素的数量一致。
- 可以根据需要修改 CSS 样式来调整文本内容的显示效果。
- 可以根据需要修改 JavaScript 代码来实现更复杂的交互逻辑。
总结
本文介绍了如何使用 JavaScript 实现当鼠标悬停在不同图像上时，动态改变下方文本内容的效果。通过监听鼠标事件，并结合 CSS 控制文本的显示与隐藏，提供了一种简单有效的解决方案。希望本文能够帮助你更好地理解和应用 JavaScript。
