实现图片和文字的联动效果：HTML/CSS 教程-html教程-PHP中文网

实现图片和文字的联动效果：HTML/CSS 教程

聖光之護

发布： 2025-10-26 09:39:48

原创

368人浏览过

实现图片和文字的联动效果：html/css 教程

本教程旨在讲解如何使用 HTML 和 CSS 创建图片和文字联动效果，即当鼠标悬停在图片上时，文字的样式也会随之改变，反之亦然。我们将利用 CSS 的兄弟选择器（sibling selector）实现这一效果，无需使用表格等复杂结构，代码简洁易懂，非常适合初学者。

实现思路

核心在于利用 CSS 的通用兄弟选择器（~）。这个选择器允许我们选择指定元素后的所有兄弟元素。在本例中，我们将图片和文字都包裹在 <a> 标签中，并利用兄弟选择器，当 <a> 标签（包含图片）被悬停时，改变其后的 .name 类的文字样式。

代码示例

下面是一个完整的 HTML 和 CSS 示例，展示了如何实现图片和文字的联动效果：

<!DOCTYPE html>
<html>
<head>
<title>图片文字联动示例</title>
<style>
  a {
    text-decoration: none; /* 移除链接下划线 */
    color: black; /* 默认文字颜色 */
  }

  a:visited {
    color: black; /* 访问过的链接文字颜色 */
  }

  a:hover {
    color: #327da8; /* 鼠标悬停时的链接文字颜色 */
  }

  .name {
    font-size: 20px;
    font-family: montserrat, sans-serif; /* 使用 sans-serif 作为备选字体 */
    position: absolute;
    margin-top: 360px;
    text-align: left;
    border: 1px solid lightgray;
    padding: 27.5px;
    border-radius: 0px 0px 15px 15px;
  }

  a img {
    border-radius: 50%;
    display: block;
    border: none;
  }

  /* 关键代码：当链接（包含图片）被悬停时，改变其后的 .name 类的文字颜色 */
  a:hover ~ .name {
    color: #327da8;
  }
</style>
</head>
<body>

<a href="#"><img style="position:absolute; margin-top:60px; margin-left:50px; border-radius:15px 15px 0px 0px;" src="https://i.pinimg.com/originals/2d/6f/8e/2d6f8ef1a4c976ce5e2a9eea5980ec92.jpg" height="300" width="200"></a>
<a class="name" style="margin-left:50px;" href="#">Nala <br><br> Breed: Golden <br> Retriever <br><br> Sex: Female</a>

</body>
</html>

登录后复制

代码解释：

图改改

在线修改图片文字

455

查看详情

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

a 标签样式： 定义了链接的默认样式，包括颜色、访问过的颜色和悬停颜色。
.name 类样式： 定义了文字的样式，包括字体大小、字体、位置、边框、内边距和圆角。
a img 样式： 定义了图片的样式，包括圆角、显示方式和边框。
a:hover ~ .name 样式： 这行代码是核心。当鼠标悬停在 <a> 标签上时，~ 选择器会选择紧跟其后的 .name 类的元素，并将其文字颜色设置为 #327da8。

注意事项

HTML 结构： 确保图片和文字都在同一个父元素内，并且文字在图片之后，这样兄弟选择器才能正常工作。
CSS 优先级： 如果文字的样式没有改变，可能是因为其他 CSS 规则的优先级更高。请检查你的 CSS 代码，确保 a:hover ~ .name 规则的优先级足够高。
替代方案： 除了兄弟选择器，还可以使用 JavaScript 来实现类似的效果，但对于简单的联动效果，CSS 方案更加简洁高效。