本文将介绍如何使用JavaScript和CSS，在鼠标悬停在不同图片上时，动态改变下方文本框中的内容。通过监听鼠标事件，并结合CSS的显示与隐藏属性，实现根据悬停图片的不同，显示对应文本的功能。本文将提供详细的代码示例和步骤说明，帮助读者快速掌握这种交互效果的实现方法。
实现原理
核心思想是利用 JavaScript 监听图片的 mouseover（鼠标悬停）和 mouseout（鼠标移出）事件。当鼠标悬停在特定图片上时，JavaScript 代码会根据图片的 ID 或其他标识，显示对应的文本内容；当鼠标移出图片时，则隐藏该文本内容，或者显示默认文本。CSS 用于控制文本的初始隐藏状态以及显示时的样式。
实现步骤
- HTML 结构:
首先，我们需要创建包含图片和文本内容的 HTML 结构。确保每个图片都有一个唯一的 ID，方便 JavaScript 进行识别。文本内容也应该分别放在独立的 div 元素中，并赋予相应的 class。
@@##@@ @@##@@ @@##@@Item Name 1
Subtypes 1
Cooldown 1
Cost 1
Size 1
Effect
Effect Here 1
Passive
Passive Here 1
Item Name 2
Subtypes 2
Cooldown 2
Cost 2
Size 2
Effect
Effect Here 2
Passive
Passive Here 2
Item Name 3
Subtypes 3
Cooldown 3
Cost 3
Size 3
Effect
Effect Here 3
Passive
Passive Here 3
- CSS 样式:
使用 CSS 隐藏初始状态下的文本内容。
立即学习“Java免费学习笔记（深入）”；
.text {
display: none;
}- JavaScript 代码:
使用 JavaScript 获取所有图片元素和文本元素，并为每个图片添加 mouseover 和 mouseout 事件监听器。
const images = document.querySelectorAll('img');
const texts = document.querySelectorAll('.text');
images.forEach(image => {
image.addEventListener('mouseover', () => {
switch (image.id) {
case 'img1':
texts[0].style.display = 'block';
break;
case 'img2':
texts[1].style.display = 'block';
break;
case 'img3':
texts[2].style.display = 'block';
break;
}
});
image.addEventListener('mouseout', () => {
switch (image.id) {
case 'img1':
texts[0].style.display = 'none';
break;
case 'img2':
texts[1].style.display = 'none';
break;
case 'img3':
texts[2].style.display = 'none';
break;
}
});
});代码解释
- document.querySelectorAll('img'): 选取所有 img 标签，返回一个 NodeList 集合。
- document.querySelectorAll('.text'): 选取所有 class 为 text 的元素，返回一个 NodeList 集合。
- forEach: 遍历 NodeList 集合，为每个图片元素添加事件监听器。
- addEventListener('mouseover', ...): 为每个图片元素添加 mouseover 事件监听器，当鼠标悬停在图片上时触发。
- addEventListener('mouseout', ...): 为每个图片元素添加 mouseout 事件监听器，当鼠标移出图片时触发。
- switch (image.id): 根据图片的 ID 判断应该显示哪个文本内容。
- texts[0].style.display = 'block': 将对应的文本内容的 display 属性设置为 block，使其显示出来。
- texts[0].style.display = 'none': 将对应的文本内容的 display 属性设置为 none，使其隐藏。
注意事项
- 唯一 ID: 确保每个图片都有唯一的 ID，否则 JavaScript 代码可能无法正确识别图片。
- CSS 样式: 可以根据需要自定义文本内容的样式，例如字体、颜色、背景等。
- 性能优化: 如果有大量的图片和文本内容，可以考虑使用事件委托来提高性能。
总结
通过以上步骤，我们可以轻松实现鼠标悬停在图片上时，动态改变下方文本内容的效果。这种交互方式可以为用户提供更加丰富的信息展示，提升用户体验。 掌握了这种方法后，可以根据实际需求进行扩展和优化，例如添加动画效果、支持更多的图片和文本内容等。
