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将悬停效果添加到主页上的产品类别

1 个答案: