0

我想在主页上添加悬停效果，如下所示： 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

任何形式的帮助表示赞赏，

问候，

4

1 回答 1

2

更新答案：

您首先需要更改 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;
}

这与我可以在不进入媒体查询的情况下进行演示一样接近：/

于 2017-02-15T10:54:07.813 回答