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

Question

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

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

我希望他们能够一直显示并完全删除悬停效果。

我设法删除了媒体查询中的悬停效果，但无法获得要在屏幕上显示的标题＆gt; 768 px

Answer 1

添加此CSS代码：

ul.products li.product img {margin:0 auto!important;}

如果您希望图像居中，也可以添加此代码：

{{1}}

Answer 2

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

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

然而，这也将使＆＃34;添加到购物车＆＃34;按钮一直显示，所以如果你不想要这种行为，你可以添加一个规则，使按钮只显示悬停：

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

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