woocommerce 最近产品悬停颜色

【问题标题】：woocommerce recent product hover colorwoocommerce 最近产品悬停颜色
【发布时间】：2019-09-24 07:21:31
【问题描述】：

我正在使用 shopisle 主题和 Fusion builder (avada)。我在我的主页上介绍了最近的产品短代码，并且可以将图片四舍五入并将按钮颜色从黑色变为蓝色，并带有白色字母。当您将鼠标悬停时，蓝色按钮周围有一个白色框。我希望它只是透明的，悬停时的蓝色按钮。如果有办法让黑色小盒子 (¡oferta!) 变成红色，那就太棒了。谷歌没有帮助我找到解决方案。我希望这里的任何人都可以帮助我。提前 THX。

最好的问候乔迪

【问题讨论】：

标签： css wordpress woocommerce hover

【解决方案1】：

您需要在此处删除 background：

.product:not(.elementor):hover .prod-img-wrap:before, .shop-item:hover .prod-img-wrap:before, .prod-img-wrap:hover:before {

    background: rgba(255,255,255,0.6);

}

并将透明度代码添加到图像：

.prod-img-wrap:hover img {

    opacity: 0.6;

}

【讨论】：

效果很好。非常感谢。可能您对小黑匣子也有解决方案。红色配白色字母会很棒。

【解决方案2】：

通过将此代码添加到自定义 css 中，我得到了销售徽章

.woocommerce span.onsale{
    background-color: red;
    color: white;
    font-size: 14px;
    font-weight: bold;
    font-style: italic;
}

【讨论】：