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

Question

我正在使用 Storefront Galleria 儿童主题。

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

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

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

Answer 1

由于类的opacity: 0设置，标题被隐藏g-product-title。您可以在主题的 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;
  }
}

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