这个需求很明确——既要让按钮和对应盒子的底色保持一致，又要给每个按钮单独定义悬停时的文字颜色，完全不用写重复的CSS类或者依赖JS，用**CSS自定义属性（变量）**就能完美解决，代码简洁还灵活。

核心思路 #

1. 让按钮的基础样式（背景色、白边框、白文字）统一用CSS控制，按钮背景色直接继承盒子的颜色，避免重复设置；
2. 给每个按钮通过style属性单独定义一个自定义变量（比如--hover-text-color），用来指定该按钮悬停时的文字颜色；
3. 在CSS的:hover伪类里引用这个变量，实现不同按钮悬停时文字颜色各自独立。

完整代码示例 #

HTML结构

<!-- 蓝色盒子，按钮悬停文字变深绿 -->
<div class="product-box" style="background-color: #1a73e8;">
  <button class="buy-btn" style="--hover-text-color: #006400;">BUY</button>
</div>

<!-- 红色盒子，按钮悬停文字变黄 -->
<div class="product-box" style="background-color: #ea4335;">
  <button class="buy-btn" style="--hover-text-color: #ffd700;">BUY</button>
</div>

<!-- 绿色盒子，按钮悬停文字变浅紫 -->
<div class="product-box" style="background-color: #34a853;">
  <button class="buy-btn" style="--hover-text-color: #e6e6fa;">BUY</button>
</div>

CSS样式

.product-box {
  padding: 20px;
  display: inline-block;
  margin: 10px;
  border-radius: 8px;
}

.buy-btn {
  /* 继承盒子的背景色，和盒子保持同色 */
  background-color: inherit;
  border: 2px solid #ffffff;
  color: #ffffff;
  padding: 10px 20px;
  border-radius: 4px;
  cursor: pointer;
  /* 加个过渡动画，悬停颜色变化更丝滑 */
  transition: color 0.3s ease;
}

/* 悬停时使用按钮自身定义的文字颜色变量 */
.buy-btn:hover {
  color: var(--hover-text-color);
}

额外扩展：如果按钮底色需要和盒子微调 #

要是你遇到按钮底色不能完全继承盒子颜色的情况（比如要浅一点/深一点），也可以给按钮再加一个自定义变量控制背景色：

<div class="product-box" style="background-color: #9c27b0;">
  <!-- 按钮底色设为稍浅的紫色，悬停文字变白 -->
  <button class="buy-btn" style="--btn-bg: #ba68c8; --hover-text-color: #ffffff;">BUY</button>
</div>

对应的CSS修改：

.buy-btn {
  /* 用自定义变量设置背景色 */
  background-color: var(--btn-bg);
  /* 其他样式不变 */
}

这种方案完全符合你的需求：动态生成按钮时，只需要在按钮标签里添加style="--hover-text-color: 你的颜色值;"，就能单独控制每个按钮的悬停文字颜色，基础样式统一由CSS管理，不用写一堆冗余代码~

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