如何实现hover指定文字时触发另一元素的CSS hover放大效果？

很简单，这个需求不用JavaScript就能搞定，靠CSS的选择器就能实现hover文字时触发图片的放大效果。我给你两种可行的方案，你可以根据自己的HTML结构来选：

方案一：利用父容器的Hover状态（最稳妥，兼容所有顺序） #

这种方法的核心是把图片和"github"文字放到同一个父容器里，当hover父容器内的任何区域（包括文字），都会触发图片的放大效果，体验更连贯，而且不管图片和文字的排列顺序如何都能生效。

步骤1：调整HTML结构 #

把图片和文字包裹在一个父容器里，比如一个div：

<div class="img-text-wrapper">
  <img src="你的图片URL" alt="GitHub图标" class="hvr-grow">
  <span class="github-label">github</span>
</div>

步骤2：补充CSS样式 #

保留你原有的.hvr-grow基础样式，再添加父容器hover时的触发规则：

/* 你原有的.hvr-grow基础样式 */
.hvr-grow {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: transform;
  transition-property: transform;
}

/* 父容器hover时，图片触发放大 */
.img-text-wrapper:hover .hvr-grow {
  -webkit-transform: scale(1.1); /* 放大比例可调整，比如1.05/1.2 */
  transform: scale(1.1);
}

/* 可选：给文字添加hover提示样式，让用户知道可交互 */
.github-label {
  margin-left: 10px;
  cursor: pointer;
  transition: color 0.3s;
}

.github-label:hover {
  color: #0066cc;
}

方案二：直接通过文字Hover触发（仅适用于文字在图片之后的情况） #

如果你的文字刚好在图片的后面，可以用CSS相邻兄弟选择器直接触发，但注意如果文字在图片前面，这个方法会失效（因为CSS目前不支持选择前序兄弟元素）。

CSS代码补充 #

/* 当hovergithub文字时，触发后面的图片放大 */
.github-label:hover + .hvr-grow {
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
}

完整可运行示例 #

这里给你一个完整的Demo代码，直接复制就能看到效果：

<div class="img-text-wrapper">
  <img src="https://cdn-icons-png.flaticon.com/512/25/25231.png" alt="GitHub" class="hvr-grow" width="50" height="50">
  <span class="github-label">github</span>
</div>

<style>
.hvr-grow {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: transform;
  transition-property: transform;
}

.img-text-wrapper:hover .hvr-grow {
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
}

.github-label {
  margin-left: 10px;
  cursor: pointer;
  color: #333;
  transition: color 0.3s;
}

.github-label:hover {
  color: #0066cc;
}
</style>

你可以根据自己的需求调整scale()里的数值，数值越大放大效果越明显，比如1.2就是放大20%。

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