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

Question

我正在使用 Storefront Galleria child 主题。

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

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

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

Answer 1

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

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

但是，这也会使“添加到购物车”按钮一直显示，所以如果您不希望出现这种情况，您可以添加一个规则，使该按钮仅在悬停时显示:

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

我个人认为这样看起来更好。