使用JavaScript和CSS实现图片悬停时改变下方文本内容-html教程-PHP中文网

使用JavaScript和CSS实现图片悬停时改变下方文本内容

霞舞

发布： 2025-08-21 19:10:39

原创

196人浏览过

使用javascript和css实现图片悬停时改变下方文本内容

本文将介绍如何使用JavaScript和CSS，在鼠标悬停在不同图片上时，动态改变下方文本框中显示的内容。核心思路是利用JavaScript监听图片的mouseover和mouseout事件，并根据当前悬停的图片，显示对应的文本内容，隐藏其他文本。本文提供完整的HTML、CSS和JavaScript代码示例，帮助你快速实现这一交互效果。

HTML结构

首先，我们需要创建HTML结构，包括图片区域和文本区域。为了方便JavaScript操作，我们需要为每个图片添加唯一的ID。文本区域包含多个div，每个div对应一张图片，初始状态下这些div都是隐藏的。

<div>
  <img src="na" id="img1">
  <img src="na" id="img2">
  <img src="na" id="img3">
</div>

<div class="text">
  <p>This is the first image text</p>
</div>

<div class="text">
  <p>This is the second image text</p>
</div>

<div class="text">
  <p>This is the three image text</p>
</div>

登录后复制

CSS样式

接下来，我们需要使用CSS来隐藏文本区域的div，使其初始状态不可见。

.text {
  display: none;
}

登录后复制

JavaScript交互逻辑

最后，我们使用JavaScript来实现悬停时的文本切换效果。

图改改

在线修改图片文字

455

查看详情

立即学习“Java免费学习笔记（深入）”；

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事件监听器。