如何在hover时将h4的背景色设置为box-shadow颜色（SCSS实现）

核心思路是用SCSS变量统一管理阴影颜色，避免重复写颜色值，后续改色也更方便。分两种场景实现：

场景1：h4本身是hover触发元素 #

如果hover效果直接作用在h4上，直接把阴影颜色定义为变量，再复用给背景色即可：

h4 {
  // 可添加h4的基础样式
  
  &:hover {
    // 定义阴影颜色变量
    $shadow-dark: #a49898;
    $shadow-light: #decece;
    
    // 应用阴影样式
    box-shadow: 20px 20px 60px $shadow-dark, -20px -20px 60px $shadow-light;
    
    // 设置背景色为其中一个阴影颜色（按需选dark或light）
    background-color: $shadow-dark;
    
    // 可选：加过渡动画让颜色变化更平滑
    transition: background-color 0.3s ease;
  }
}

场景2：h4是父容器hover时的子元素 #

如果hover触发在父容器上，需要在父容器的hover状态下给内部h4设置背景色：

// 假设父容器类名为.card
.card {
  // 父容器基础样式
  
  &:hover {
    $shadow-dark: #a49898;
    $shadow-light: #decece;
    
    box-shadow: 20px 20px 60px $shadow-dark, -20px -20px 60px $shadow-light;
    
    // 给子元素h4设置背景色
    h4 {
      background-color: $shadow-light;
      transition: background-color 0.3s ease;
    }
  }
}

额外选项：用混合色做背景 #

要是想让背景色是两个阴影颜色的混合效果，用SCSS内置的mix()函数就行：

h4 {
  &:hover {
    $shadow-dark: #a49898;
    $shadow-light: #decece;
    
    box-shadow: 20px 20px 60px $shadow-dark, -20px -20px 60px $shadow-light;
    // 生成两个颜色的50%混合色作为背景
    background-color: mix($shadow-dark, $shadow-light);
  }
}

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