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

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

DDD

发布： 2025-08-21 19:28:01

原创

212人浏览过

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

本文将介绍如何使用JavaScript和CSS，在鼠标悬停在不同图片上时，动态改变下方文本框中的内容。通过监听鼠标事件，并结合CSS的显示与隐藏属性，实现根据悬停图片的不同，显示对应文本的功能。本文将提供详细的代码示例和步骤说明，帮助读者快速掌握这种交互效果的实现方法。

实现原理

核心思想是利用 JavaScript 监听图片的 mouseover（鼠标悬停）和 mouseout（鼠标移出）事件。当鼠标悬停在特定图片上时，JavaScript 代码会根据图片的 ID 或其他标识，显示对应的文本内容；当鼠标移出图片时，则隐藏该文本内容，或者显示默认文本。CSS 用于控制文本的初始隐藏状态以及显示时的样式。

实现步骤

HTML 结构:

首先，我们需要创建包含图片和文本内容的 HTML 结构。确保每个图片都有一个唯一的 ID，方便 JavaScript 进行识别。文本内容也应该分别放在独立的 div 元素中，并赋予相应的 class。

<div class="mak-item">
  <div class="mak-item-container">
    <img src="image1.jpg" id="img1" data-tilt data-tilt-scale="1.1" class="makitem1">
    <img src="image2.jpg" id="img2" data-tilt data-tilt-scale="1.1" class="makitem2">
    <img src="image3.jpg" id="img3" data-tilt data-tilt-scale="1.1" class="makitem3">
  </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 隐藏初始状态下的文本内容。

图改改

在线修改图片文字

455

查看详情

立即学习“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;
    }
  });
});

登录后复制