Woocommerce Storefront 为主页上的产品类别添加悬停效果

Question

我想在主页上添加悬停效果，如下所示： http://demo.woothemes.com/?name=galleria&_ga=1.242371650.1503770507.1481544136

我找到了一种在产品中添加悬停效果的方法

/* Make product in categories glow on hover */
.woocommerce-page ul.products li.product:hover {
box-shadow: 0 0 20px #1e73be;
}

但我找不到在主页部分为产品类别制作此内容的方法。

我使用店面子主题大师来编辑店面主题： https://github.com/stuartduff/storefront-child-theme

感谢任何形式的帮助，

此致，

Answer 1

更新的答案：

您首先需要更改 h3 标题的位置和可见性。

ul.products li.product.product-category h3 {
   top: 0;
   width: 100%;
   height: 100%;
   position: absolute;
   opacity: 0;
   padding-top: 25%;
   background: rgba(255,255,255,.6);
}

然后让它在悬停时可见。

ul.products li.product.product-category:hover h3 {
   opacity: 1;
}

这是我在不进行媒体查询的情况下最接近的演示：/

Woocommerce Storefront 为主页上的产品类别添加悬停效果

Woocommerce Storefront Adding a hover effect to product categories on Home Page

css

wordpress

hover

storefront

woocommerce