Woocommerce店面在首页添加一个悬停效果，产品类别页

问题描述：

我想在主页上添加喜欢这里悬停效果： http://demo.woothemes.com/?name=galleria&_ga=1.242371650.1503770507.1481544136 Woocommerce店面在首页添加一个悬停效果，产品类别页

我发现了一种在产品中添加悬浮效果

/* 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

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

问候，

答

修订答：

你首先会需要改变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; 
}

那是因为这是我所能得到的演示没有进入媒体查询：/

其实我想在首页产品类别添加悬停效果。不是单独的产品。因为它在这里：http://demo.woothemes.com/?name=galleria&_ga=1.242371650.1503770507.1481544136 – Kibo

在悬停效果的产品类别和类别的名称+数量的项目可获得的 – Kibo

啊，好的。这是一个隐藏的覆盖层，更改为不透明：1悬停。如果您的页面上包含该隐藏部分，您应该可以通过以下方式触发该隐藏部分： ul.products li.product：hover .g-product-title {opacity：1} – Digedu

Woocommerce店面在首页添加一个悬停效果，产品类别页

相关推荐