HTML：实现图片和文字联动效果的教程_石家庄创泽智能科技有限公司

新闻中心 NEWS CENTER

您当前位置：首页 > 新闻中心 > 网络学院

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

2025-10-27

浏览次数：次

返回列表

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

本教程旨在帮助初学者掌握如何使用HTML和CSS实现图片和文字的联动效果，即当鼠标悬停在图片上时，与之相关的文字样式也会随之改变。我们将通过一个简单的示例，讲解如何利用CSS选择器和样式控制，实现这种交互效果，提升网页的用户体验。

实现图片和文字的联动效果，通常可以通过以下几种方式：使用J*aScript监听事件、使用CSS的:hover伪类结合兄弟选择器，或者将图片和文字包裹在同一个链接中。这里，我们重点介绍使用CSS的:hover伪类结合兄弟选择器来实现这一效果，这种方法无需编写额外的J*aScript代码，更加简洁高效。

基本思路

HTML结构: 将图片和文字放置在同一个父元素下，通常使用标签包裹图片，并使用或
等标签包裹文字。
CSS样式: 使用a:hover伪类来监听鼠标悬停事件，并使用通用兄弟选择器(~)来选中与标签相邻的文字元素，并修改其样式。

示例代码

以下是一个完整的示例代码，展示了如何实现当鼠标悬停在图片上时，文字颜色发生改变的效果：

YothSHOP是优斯科技鼎力打造的一款asp开源商城系统，支持access和Sql server切换，完善的会员订单管理，全站生成静态html文件，SEO优化效果极佳，后台XP模式和普通模式随意切换，极易操作，欢迎使用！ Asp开源商城系统YothSHOP功能介绍：1.使用静态页和程序页分离技术，网站可自由开启和关闭，实现全站生成静态页，可动静态切换，方便二次开发和后期维护。2.管理员管理：后台

查看详情

<!DOCTYPE html>
<html>
<head>
<title>图片和文字联动</title>
<style>
  /* 默认样式 */
  a {
    text-decoration: none; /* 移除链接下划线 */
  }

  .image-container {
    display: inline-block; /* 使链接和文字并排显示 */
  }

  .image-container img {
    border-radius: 50%; /* 图片圆形化 */
    display: block;
    border: none;
    width: 100px; /* 设置图片宽度 */
    height: 100px; /* 设置图片高度 */
  }

  .text {
    font-size: 16px;
    color: black;
  }

  /* 鼠标悬停在链接上时的样式 */
  .image-container:hover .text {
    color: #327da8; /* 改变文字颜色 */
  }
</style>
</head>
<body>

<div class="image-container">
  <a href="#">
    @@##@@
  </a>
  <p class="text">示例文字</p>
</div>

</body>
</html>

代码解释

.image-container: 用于包裹图片和文字的容器，设置为inline-block可以使图片和文字并排显示。
.image-container img: 设置图片的样式，例如圆形边框和尺寸。
.text: 设置文字的默认样式。
.image-container:hover .text: 关键部分，当鼠标悬停在.image-container上时，选中其内部的.text元素，并改变其颜色。这里使用了后代选择器，确保只有在容器悬停时才改变文字颜色。

注意事项