使用Variations主题时，按钮悬停状态文本颜色无法修改的问题

你的问题出在CSS优先级冲突上：HTML里的按钮<a>标签写了内联样式color:#ff0000，内联样式的优先级比你写的类选择器.wp-element-button:hover更高，所以hover时背景色能正常修改，但文本颜色被内联样式覆盖，无法生效。

有两种解决方式：

方式一：提高CSS选择器优先级 #

用更具体的选择器（无需额外使用!important），或者临时用!important强制覆盖（不推荐滥用，但针对该场景可快速解决）：

/* 更具体的选择器，优先级高于内联样式 */
.wp-block-button .wp-block-button__link.wp-element-button:hover {
  background-color: red;
  color: white;
}

/* 或者用!important强制覆盖内联样式 */
.wp-element-button:hover {
  background-color: red;
  color: white !important;
}

方式二：移除内联样式 #

直接删掉HTML里<a>标签style属性中的color:#ff0000，让CSS类来统一控制颜色：

<div class="wp-block-button has-custom-font-size is-style-fill mybtn has-small-font-size"><a class="wp-block-button__link has-text-color has-link-color has-border-color wp-element-button" style="border-color:#ff0000;border-style:solid;border-width:2px;border-radius:0px;padding-top:5px;padding-right:10px;padding-bottom:5px;padding-left:10px">LEARN MORE</a></div>

修改后，按钮hover时的文本颜色就能正常变为白色了。

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