使用 HTML CSS 从添加到购物车按钮中删除悬停效果答案

【问题标题】：remove hover effect from add to cart button using HTML CSS使用 HTML CSS 从添加到购物车按钮中删除悬停效果
【发布时间】：2021-10-15 12:47:51
【问题描述】：

我正在开发一个电子商务应用程序，但我使用的主题添加到购物车按钮会出现悬停效果，但我想让（添加到购物车按钮）始终固定。

现场工作网址如下。

当光标在产品上时会添加到购物车，但我希望它应该总是出现

【问题讨论】：

【解决方案1】：

你需要删除下的样式

.product-wrap .product-img .product-action-2-wrap {
    opacity: 0;
    visibility: hidden;
    bottom: -20px;
}

如果没有悬停，它会隐藏添加到购物车按钮。或者您可以使用替换相同的

.product-wrap .product-img .product-action-2-wrap {
    bottom: 0px;
    opacity: 1;
    visibility: visible;
}

因此，当您将鼠标悬停在产品上时，这就是有效的代码。

【讨论】：

【解决方案2】：

将此代码添加到您的添加自定义代码中

.product-action-2-wrap{
  visibility: visible;
  opacity: 1;
  bottom: 0px;
}

这将显示添加到购物车按钮在产品中始终可见。

如果对你有用，请给个赞。

【讨论】：

【解决方案3】：

只需使用相同的颜色删除 Hover 上的背景颜色：

.product-wrap .product-img .product-action-2-wrap:hover .product-action-btn-2 {
background-color: #000;

}

【讨论】：