CSS实现hover时图片放大、同div内链接文字变色效果

核心实现逻辑 #

不要单独给图标元素绑定hover事件，将hover触发绑定在同时包裹图标和文字的共同父容器上，即可实现鼠标悬停在区块任意位置时，同时触发图标放大、文字变色的效果，避免出现鼠标移到文字上图标无反应、移到图标上文字不变色的交互断层。

代码实现 #

前提HTML结构参考 #

保证图标和对应文字在同一个父容器内，类名按你预设的命名即可：

<div class="home-function-block">
  <img src="图标路径" class="home01" alt="功能入口图标">
  <a href="对应跳转地址" class="home001">功能入口文字</a>
</div>

完整CSS代码 #

在你原有图片放大代码的基础上补充即可：

/* 父容器统一设置鼠标手型 */
.home-function-block {
  cursor: pointer;
}

/* 原有图标样式保留，优化过渡属性写法 */
.home01{
  -webkit-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
}

/* 文字链接默认样式，加颜色过渡保证动画平滑 */
.home001{
  /* 替换为你需要的默认文字色值 */
  color: #333;
  text-decoration: none;
  -webkit-transition: color 0.3s ease-out;
  transition: color 0.3s ease-out;
}

/* 父容器hover时联动触发图标放大 */
.home-function-block:hover .home01 {
  transform: scale(1.06);
}

/* 父容器hover时联动触发文字变色，文字未加transform属性尺寸不会变化 */
.home-function-block:hover .home001 {
  /* 替换为你需要的悬停文字色值 */
  color: #c7161e;
}

注意事项 #

• 文字本身没有添加transform属性，悬停时尺寸完全不会变化，符合需求
• 过渡属性统一设置为0.3s缓出，和你原有动画节奏保持一致
• 不建议使用兄弟选择器直接绑定.home01:hover + .home001这类写法，鼠标悬停在文字区域时不会触发图标放大，交互体验和参考效果不一致

内容的提问来源于stack exchange，提问作者YiChing