悬停选项上的店面产品标题

Question

我正在使用 Storefront Galleria Child 主题。

问题是在我的产品页面 https://www.mangoblogger.com/services/ 上，产品 titles/price 在 768 像素处消失，并且仅在悬停时重新出现。

我希望它们一直显示并完全移除悬停效果。

我设法移除了媒体查询中的悬停效果，但无法让标题显示在 > 768 像素的屏幕上

Answer 1

由于 g-product-title class 上的 opacity: 0 设置，标题已隐藏。您可以通过在加载主题的 CSS 文件后的某处添加此规则来覆盖该行为（在稍后的 CSS 文件或 <style> 标记中）：

@screen and (min-width: 768px) {
  .site-main ul.products li.product .g-product-title {
    opacity: 1;
  }
}

但是，这也会使 "Add to Cart" 按钮一直显示，所以如果您不希望出现这种情况，您可以添加一个规则，使按钮仅在悬停时显示：

@screen and (min-width: 768px) {
  .site-main ul.products li.product .button {
    opacity: 0;
  }
  .site-main ul.products li.product:hover .button {
    opacity: 1;
  }
}

我个人认为这样更好看。

悬停选项上的店面产品标题

Storefront product title on hover option

css

wordpress

frontend

storefront

woocommerce