Question

目前正在www.blancobay-com.stackstaging.com上工作，

我正在尝试更改产品缩略图的悬停，以便显示标题和价格，而不是显示第二个产品图片，并且仍然具有标题和价格

我试图通过当前的CSS来定义

    /* Make column wrapper background transparent and move to front of stack and add padding*/
.woocommerce ul.products li.product   {
    background-color: rgba(255,255,255,0);
    padding: 0px 0px 80px 0px;
z-index: 1;
   }
/* position image as absolute for title, price, button etc. overlay and move to back of stack*/
.wc-product-image {
    position: absolute;
    opacity: 1;
z-index: -1;
}
/* set tranistion for hover effect*/
.woocommerce .product a {
transition: all 0.35s ease-in-out;
}
.woocommerce .product:not(:hover) :matches( .price, .add_to_cart_button,  .woocommerce-loop-product__title, .star-rating ) {
    opacity: 0;
}
.woocommerce li.product:hover .wc-product-image{
opacity: 0.6;
}

但是这还不起作用，我认为这可能与WooCommerce已经定义为悬停是第二个产品图像的事实有关，有没有人知道对CSS的任何修复或可能的调整所以我可以覆盖WooCommerce的代码？

感谢阅读，

在WooCommerce中叠加产品标题和价格超过缩略图

0 个答案: