Woocommerce使用CSS悬停更改产品图像

Question

当用户在Woocommerce产品归档页面上使用纯CSS将产品图像悬停在产品图像上时，我正在尝试更改产品图像。

在我的CSS中，我将鼠标悬停在单个产品上，并用存储在Woocommerce产品图片库中的第二张图片覆盖它。

我的代码部分起作用。当我将鼠标悬停在产品图片上时，会显示第二张图片，但它在我的原始图片后面，并且尺寸比例错误。我尝试使用z-index:9999，但对订购没有影响。

当用户将鼠标悬停在第二张图片上时，如何将其更改为第二张图片？

以下是显示以下错误的悬停行为的网页。仅为第一个产品启用CSS： Link

我的代码：

/* Selecting the individual product image */        
.post-1394.product.type-product.status-publish.has-post-thumbnail.product_cat-protein.first.instock.shipping-taxable.purchasable.product-type-simple:hover {

/* Replacing the product image with my secondary image from gallery */
    background: url(https://proteinandpantry.com/wp-content/uploads/2018/09/BeefJerkySaltAndPepper-324x324.jpg) 

    no-repeat;
    z-index: 9999;

    }

将鼠标悬停在产品上时的结果截图：

Answer 1

这是因为您正在<li>元素上使用背景图像，而不是<img>元素本身。因为这是图片的父元素，所以背景永远不会显示在图片本身上方。

如果您希望将背景图像保留在父元素上，则只需在悬停时为子opacity:0;元素添加<img>规则。

例如

.product.type-product:hover img {
    opacity:0;
}

当您将鼠标悬停在父<li>元素上时，会将图像不透明度设置为0。

您还有另一个选择是将容器添加到<img>元素，并在该容器元素上使用:before选择器，并将辅助图像作为背景图像。

这看起来像：

ul.products li.product img {
    position:relative;
}

ul.products li.product .product-image-container:before {
    content:"";
    display:none;
    background: url(https://proteinandpantry.com/wp-content/uploads/2018/09/BeefJerkySaltAndPepper-324x324.jpg) no-repeat;
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    z-index:1;
}

然后显示父项悬停前的内容：

.product.type-product:hover .product-image-container:before {
    display:block;
}

在此处查看示例：http://jsfiddle.net/g5u4Lbxn/

大多数浏览器都不支持图像上的:before选择器，因此您需要为图像添加容器元素

对于图像容器元素，该特定<li>元素的HTML应该如下所示：

<li class="post-1394 product type-product status-publish has-post-thumbnail product_cat-protein first instock shipping-taxable purchasable product-type-simple">
    <h2 class="woocommerce-loop-product__title">Spicy Teriyaki Turkey Jerky</h2>
    <div class="product-image-container">
        <img width="324" height="324" src="https://proteinandpantry.com/wp-content/uploads/2018/09/TurkeyJerky-324x324.jpg" class="attachment-woocommerce_thumbnail size-woocommerce_thumbnail wp-post-image">
    </div>
    <div class="star-rating">
        <span style="width:100%">Rated <strong class="rating">5.00</strong> out of 5</span>
    </div>
    <span class="price">
        <span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">£</span>2.50</span>
    </span>
    <a href="/shopnew/?add-to-cart=1394" data-quantity="1" class="button product_type_simple add_to_cart_button ajax_add_to_cart" data-product_id="1394" data-product_sku="" aria-label="Add “Spicy Teriyaki Turkey Jerky” to your basket" rel="nofollow">Add To Box</a>
    <a class="xoo-qv-button" qv-id="1394"><span class="xoo-qv-btn-icon xooqv-search xoo-qv"></span>Learn More</a>
</li>

Answer 2

问题在于原始图像是图像标签，而不是背景。您正在做的是在product div后面添加一个背景，该背景在整个产品（包括该产品的图片）的后面。没有一种方法可以用CSS替换图像源，但是可以使用Javascript来完成。 Replace image by javascript

Answer 3

我参加聚会迟到了……但是行得通

/* wooCommerce product page image hover / change image *   <--- just do this once/

.product.type-product:hover img {
    opacity :0;
    z-index: -1;       
}


/*Bezel Set Emerald Ring #6489*   <--- you will need to do this for each post/

 .post-6489 .fusion-image-wrapper {
    background-image: url("https://www.caesarsdesigns.com/wp-content/uploads/2019/05/emerald02.jpg");
  background-repeat: no-repeat;
  background-position: center; 
    background-size: 223px 224px;
}

其中img容器的大小为223px 224px。