本文将介绍如何使用JavaScript和CSS，在鼠标悬停在不同图片上时，动态改变下方文本框中显示的内容。核心思路是利用JavaScript监听图片的mouseover和mouseout事件，并根据当前悬停的图片，显示对应的文本内容，隐藏其他文本。本文提供完整的HTML、CSS和JavaScript代码示例，帮助你快速实现这一交互效果。
HTML结构
首先，我们需要创建HTML结构，包括图片区域和文本区域。为了方便JavaScript操作，我们需要为每个图片添加唯一的ID。文本区域包含多个div，每个div对应一张图片，初始状态下这些div都是隐藏的。
@@##@@ @@##@@ @@##@@This is the first image text
This is the second image text
立即学习“Java免费学习笔记（深入）”；
CSS样式
接下来，我们需要使用CSS来隐藏文本区域的div，使其初始状态不可见。
.text { display: none;}
JavaScript交互逻辑
最后，我们使用JavaScript来实现悬停时的文本切换效果。
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; } });});
这段代码首先获取所有的img和text元素。然后，它遍历每个img元素，并为每个元素添加mouseover和mouseout事件监听器。
mouseover事件：当鼠标悬停在图片上时，根据图片的ID，显示对应的文本div。mouseout事件：当鼠标离开图片时，隐藏对应的文本div。
优化和注意事项
代码可维护性： 在实际项目中，如果图片和文本数量较多，可以使用data-*属性来存储文本内容，避免硬编码。性能优化： 如果图片数量非常大，频繁的DOM操作可能会影响性能。可以考虑使用事件委托，将事件监听器添加到父元素上。CSS动画： 可以添加CSS动画效果，使文本切换更加平滑。例如，使用opacity属性和transition属性实现淡入淡出效果。
总结
通过结合HTML、CSS和JavaScript，我们可以轻松实现图片悬停时改变下方文本内容的效果。这种交互方式可以提升用户体验，使网页更加生动有趣。在实际应用中，可以根据具体需求进行优化和扩展，例如，添加更多图片和文本，或者使用更复杂的动画效果。
以上就是使用JavaScript和CSS实现图片悬停时改变下方文本内容的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1573117.html
微信扫一扫 
支付宝扫一扫 
