实现图文联动悬停效果：HTML/CSS 教程-html教程-PHP中文网

实现图文联动悬停效果：HTML/CSS 教程

聖光之護

发布： 2025-10-26 09:16:01

原创

438人浏览过

实现图文联动悬停效果：HTML/CSS 教程

本教程旨在介绍如何使用 html 和 css 创建图文联动悬停效果，即当鼠标悬停在图片上时，与之关联的文字样式也会随之改变。我们将利用 css 的兄弟选择器实现这一效果，无需 javascript，代码简洁易懂，适用于各种网页设计场景。

在网页设计中，经常需要实现一些交互效果来提升用户体验。其中，图文联动是一种常见的需求，例如，当鼠标悬停在图片上时，与之相关的文字信息也随之改变样式，从而增强视觉反馈。本教程将介绍如何使用 HTML 和 CSS 实现这种效果，重点在于利用 CSS 的兄弟选择器，避免使用 JavaScript，使代码更加简洁高效。

核心概念：兄弟选择器

CSS 的兄弟选择器（~）用于选择指定元素之后的所有同级元素。在本例中，我们将利用这个特性，当鼠标悬停在图片链接上时，选择该链接之后的文字链接，并改变其样式。

实现步骤

HTML 结构：

首先，我们需要构建基本的 HTML 结构，包含一个图片链接和一个文字链接。关键在于，这两个链接必须是同级元素，并且文字链接位于图片链接之后。

立即学习“前端免费学习笔记（深入）”；
```
<a href="#" class="image-link">
  <img src="image.jpg" alt="Image">
</a>
<a href="#" class="text-link">
  Text Description
</a>
```
登录后复制
这里我们为图片链接添加了 image-link 类，为文字链接添加了 text-link 类，方便后续使用 CSS 进行样式控制。
CSS 样式：

火龙果写作
用火龙果，轻松写作，通过校对、改写、扩展等功能实现高质量内容生产。

106

查看详情

接下来，我们需要编写 CSS 样式来实现悬停效果。
```
.image-link img {
  border-radius: 50%; /* 圆角效果，可根据需要调整 */
  display: block;
  border: none;
}

.text-link {
  font-size: 20px;
  color: black;
  text-decoration: none;
  /* 其他样式 */
}

.image-link:hover ~ .text-link {
  color: #327da8; /* 悬停时的文字颜色 */
}
```
登录后复制
这段 CSS 代码首先定义了图片和文字链接的默认样式，例如圆角、字体大小、颜色等。最关键的部分是 .image-link:hover ~ .text-link 这条规则。它表示当鼠标悬停在 .image-link 上时，选择其后的所有 .text-link 元素，并将文字颜色设置为 #327da8。

完整示例代码

<!DOCTYPE html>
<html>
<head>
  <title>Image and Text Hover Effect</title>
  <style>
    .image-link img {
      border-radius: 50%;
      display: block;
      border: none;
    }

    .text-link {
      font-size: 20px;
      color: black;
      text-decoration: none;
    }

    .image-link:hover ~ .text-link {
      color: #327da8;
    }
  </style>
</head>
<body>

  <a href="#" class="image-link">
    <img src="https://via.placeholder.com/150" alt="Example Image">
  </a>
  <a href="#" class="text-link">
    Example Text
  </a>

</body>
</html>

登录后复制

将以上代码保存为 HTML 文件，并在浏览器中打开，即可看到效果。当鼠标悬停在图片上时，文字的颜色会变为蓝色。