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

任何形式的幫助表示讚賞，

問候，

來源

2017-02-15 Kibo

修訂答：

你首先會需要改變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-15 10:54:07 Digedu

其實我想在首頁產品類別添加懸停效果。不是單獨的產品。因爲它在這裏：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店面在首頁添加一個懸停效果，產品類別頁

回答

相關問題