修改WooCommerce YITH Ajax产品筛选器的悬停与激活态文字颜色

要修改YITH Ajax产品筛选器的悬停与激活态文字颜色为白色，你可以采用以下两种可靠方案：

方案1：覆盖插件CSS变量 #

插件通过内置CSS变量控制文字颜色，你可以在主题自定义CSS区域添加以下代码，直接覆盖目标变量：

/* 全局覆盖筛选器标签的悬停/激活态文字颜色 */
:root {
  --yith-wcan-labels_style_text_hover: #ffffff !important;
  --yith-wcan-labels_style_text_active: #ffffff !important;
  /* 同步修正锚点元素的对应颜色，确保样式一致性 */
  --yith-wcan-anchors_style_text_hover: #ffffff !important;
  --yith-wcan-anchors_style_text_active: #ffffff !important;
}

若只想让样式作用于筛选器局部，可将:root替换为筛选器容器类：

.filter-content {
  --yith-wcan-labels_style_text_hover: #ffffff !important;
  --yith-wcan-labels_style_text_active: #ffffff !important;
  --yith-wcan-anchors_style_text_hover: #ffffff !important;
  --yith-wcan-anchors_style_text_active: #ffffff !important;
}

方案2：直接针对元素写样式（优先级更高） #

如果变量覆盖未生效，直接定位到交互元素写样式，确保优先级足够：

/* 筛选器选项悬停时文字变白 */
.filter-items .filter-item a:hover .term-label {
  color: #ffffff !important;
}
/* 筛选器选项激活时文字变白 */
.filter-items .filter-item.active a .term-label {
  color: #ffffff !important;
}

你之前的代码无效原因 #

• 类名错误：使用的.yith-wcan-labels .labels-style-text-hover并非插件实际使用的类名，插件交互元素是.filter-item下的<a>标签和.term-label文本容器。
• CSS语法错误：text_hover: {rgb(8,120,10);}不符合标准CSS语法，无论是变量还是属性，都需要遵循正确的写法规范。

内容的提问来源于stack exchange，提问作者Sofia Hjärtberg Zintio