WordPress本地环境下如何去除WooCommerce迷你购物车按钮hover灰色覆盖层？

嘿，作为经常折腾FlatSome主题的开发者，我太懂这个坑了！你遇到的灰色覆盖层并不是按钮背景色的问题——FlatSome主题默认给按钮的hover状态加了一个伪元素叠加层，单纯修改background属性根本搞不定它。

问题根源 #

FlatSome的按钮组件为了实现精致的hover效果，会在按钮上通过::before伪元素添加一层半透明的深色遮罩，这就是你看到的灰色覆盖层。它独立于按钮本身的background属性，所以你设置的白色背景会被这层遮罩盖住，看起来变暗失真。

解决方案 #

直接覆盖掉这个伪元素的样式就行，把下面的CSS代码加到你的主题自定义CSS里（外观→自定义→额外CSS）：

/* 移除迷你购物车按钮hover时的灰色伪元素覆盖层 */
.widget_shopping_cart .button:hover::before {
    display: none !important;
}

/* 确保hover状态的按钮样式符合你的需求 */
.widget_shopping_cart .button:hover {
    background: white !important;
    width: 100%;
    margin: 0.5em 0 0;
}

如果上面的代码没生效，可能是主题用了其他方式实现遮罩（比如filter滤镜或者opacity属性），可以试试下面的代码兜底：

.widget_shopping_cart .button:hover {
    background: white !important;
    filter: none !important; /* 移除亮度/暗化滤镜 */
    opacity: 1 !important; /* 确保完全不透明 */
}

.widget_shopping_cart .button:hover::before {
    background: transparent !important;
    opacity: 0 !important;
}

小技巧 #

你可以用浏览器的开发者工具（按F12）定位问题：右键迷你购物车按钮→选择「检查」，然后在Elements面板里找到按钮元素，勾选:hover状态，查看Styles面板里的属性，就能准确找到那个灰色覆盖层对应的CSS选择器，针对性修改更高效。

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