本文将介绍如何使用JavaScript和css，在鼠标悬停在不同图片上时，动态改变下方文本框中的内容。通过监听鼠标事件，并结合CSS的显示与隐藏属性，实现根据悬停图片的不同，显示对应文本的功能。本文将提供详细的代码示例和步骤说明，帮助读者快速掌握这种交互效果的实现方法。
实现原理
核心思想是利用 JavaScript 监听图片的 mouseover（鼠标悬停）和 mouseout（鼠标移出）事件。当鼠标悬停在特定图片上时，JavaScript 代码会根据图片的 ID 或其他标识，显示对应的文本内容；当鼠标移出图片时，则隐藏该文本内容，或者显示默认文本。CSS 用于控制文本的初始隐藏状态以及显示时的样式。
实现步骤
- html 结构:
首先，我们需要创建包含图片和文本内容的 HTML 结构。确保每个图片都有一个唯一的 ID，方便 JavaScript 进行识别。文本内容也应该分别放在独立的 div 元素中，并赋予相应的 class。
<div class="mak-item"> <div class="mak-item-container"> @@##@@ @@##@@ @@##@@ </div> </div> <div class="mak-item-text"> <div class="mak-item-text-wrapper fade-in"> <div class="text" id="text1"> <p class="mak-item-name">Item Name 1</p> <br> <p class="mak-subtypes">Subtypes 1</p> <br> <br> <p class="mak-cooldown">Cooldown 1</p> <p class="mak-cost">Cost 1</p> <p class="mak-size">Size 1</p> <br> <br> <p class="mak-effect-heading">Effect</p> <p class="mak-effect">Effect Here 1</p> <br> <p class="mak-passive-heading">Passive</p> <p class="mak-passive">Passive Here 1</p> </div> <div class="text" id="text2"> <p class="mak-item-name">Item Name 2</p> <br> <p class="mak-subtypes">Subtypes 2</p> <br> <br> <p class="mak-cooldown">Cooldown 2</p> <p class="mak-cost">Cost 2</p> <p class="mak-size">Size 2</p> <br> <br> <p class="mak-effect-heading">Effect</p> <p class="mak-effect">Effect Here 2</p> <br> <p class="mak-passive-heading">Passive</p> <p class="mak-passive">Passive Here 2</p> </div> <div class="text" id="text3"> <p class="mak-item-name">Item Name 3</p> <br> <p class="mak-subtypes">Subtypes 3</p> <br> <br> <p class="mak-cooldown">Cooldown 3</p> <p class="mak-cost">Cost 3</p> <p class="mak-size">Size 3</p> <br> <br> <p class="mak-effect-heading">Effect</p> <p class="mak-effect">Effect Here 3</p> <br> <p class="mak-passive-heading">Passive</p> <p class="mak-passive">Passive Here 3</p> </div> </div> </div>
- 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 样式: 可以根据需要自定义文本内容的样式，例如字体、颜色、背景等。
- 性能优化: 如果有大量的图片和文本内容，可以考虑使用事件委托来提高性能。
总结
通过以上步骤，我们可以轻松实现鼠标悬停在图片上时，动态改变下方文本内容的效果。这种交互方式可以为用户提供更加丰富的信息展示，提升用户体验。 掌握了这种方法后，可以根据实际需求进行扩展和优化，例如添加动画效果、支持更多的图片和文本内容等。
评论（已关闭）
评论已关闭