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

Posted 2023-05-08

【中文标题】Woocommerce Storefront 为主页上的产品类别添加悬停效果

【英文标题】：Woocommerce Storefront Adding a hover effect to product categories on Home Page

【发布时间】：2017-07-03 23:31:55

【问题描述】：

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

感谢任何形式的帮助，

问候，

【参考方案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;

这是我可以在不进入媒体查询的情况下进入演示的最接近的地方：/

【讨论】：

其实我想在首页的产品类别中添加一个悬停效果。不是单独的产品。就在这里：demo.woothemes.com/…

在具有悬停效果的产品类别和类别名称+可用项目数量

啊，好的。这是一个隐藏的叠加层，在悬停时更改为 opacity: 1。如果该隐藏部分包含在您的页面上，您应该可以使用以下命令触发它： ul.products li.product:hover .g-product-title opacity: 1

但我需要查看您正在处理的实际页面以提供量身定制的解决方案

我已经在那里更新了我的答案。我可以使用您的网站底层代码进行演示