如何在鼠标悬停包含文本的div时更改HTML文本的外观？

问题根源在于当前的hover效果仅绑定在文本元素本身，只有鼠标直接悬停文本时才会触发样式变化。要实现鼠标进入文本所在div区域就触发效果，只需把触发范围切换到父div即可，以下提供两种实现方案：

方案一：Angular 事件绑定+类切换 #

适合需要在hover时执行额外逻辑的场景：

HTML 代码 #

<div class="text-wrapper" (mouseenter)="isHovered = true" (mouseleave)="isHovered = false">
  <span [class.hover-active]="isHovered">目标文本</span>
</div>

TypeScript 代码 #

import { Component } from '@angular/core';

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html',
  styleUrls: ['./your-component.component.css']
})
export class YourComponentComponent {
  isHovered = false;
}

CSS 代码 #

.text-wrapper {
  padding: 15px; /* 调整padding扩大可触发区域，让鼠标靠近文本就触发 */
  display: inline-block; /* 让div自适应文本宽度，按需调整 */
}

.hover-active {
  color: #e74c3c;
  transform: scale(1.15);
  transition: color 0.3s ease, transform 0.3s ease;
}

span {
  transition: color 0.3s ease, transform 0.3s ease; /* 恢复时的平滑过渡 */
}

方案二：纯CSS实现（更轻量） #

如果不需要额外逻辑，纯CSS是最优选择，无需TypeScript代码：

HTML 代码 #

<div class="text-wrapper">
  <span>目标文本</span>
</div>

CSS 代码 #

.text-wrapper {
  padding: 15px;
  display: inline-block;
}

.text-wrapper:hover span {
  color: #e74c3c;
  transform: scale(1.15);
  transition: all 0.3s ease;
}

span {
  transition: all 0.3s ease;
}

两种方案都能实现鼠标进入div区域（无论是否直接悬停文本）时，触发文本变色和放大的效果，你可以根据是否需要额外业务逻辑选择对应方案。

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