WooCommerce店面在首页上为产品类别增添了悬停效果

Question

我想在此处的主页上添加悬停效果：http://demo.woothemes.com/?name=galleria&Amp;_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;
}

那尽我所能接近演示，而无需进入媒体查询：/