使用SCSS和HTML实现文本悬停缩放失效，求问题排查

核心问题出在你的CSS写法上：你把transition属性放在了:hover伪类里，这会导致只有鼠标刚悬停的瞬间才会触发过渡，元素本身没有过渡能力，所以平滑放大的效果根本跑不起来。

正确的做法是把过渡属性加到.wrd-content的基础样式中，让元素默认就具备过渡能力，悬停时只修改缩放值就行：

section.hero .wrd-content {
  transition: transform 0.2s; /* 过渡逻辑放在元素本身 */
}

section.hero .wrd-content:hover {
  transform: scale(1.5); /* 悬停时只改缩放 */
}

另外补充几个排查点：

• 确认你的CSS已经正确引入到HTML里（比如写在<style>标签内，或者通过<link>链接了样式文件）
• 检查有没有其他优先级更高的CSS规则覆盖了这个样式，临时测试可以加!important：transform: scale(1.5) !important;
• 注意<hr>是自闭合标签，不需要写</hr>，直接写成<hr>就可以

完整可运行的代码示例：

<!DOCTYPE html>
<html>
<head>
  <style>
    section.hero .wrd-content {
      transition: transform 0.2s;
    }

    section.hero .wrd-content:hover {
      transform: scale(1.5);
    }
  </style>
</head>
<body>
  <section class="hero">
    <div class="wrd-content">
      <h2>Hello... I am</h2>
      <h1>FirstName <br>LastName </h1>
      <hr>
    </div>
  </section>
</body>
</html>

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