WooCommerce изменить изображение продукта при наведении курсора с помощью CSS

Question

Я пытаюсь изменить изображение продукта, когда пользователь наводит на него курсор мыши с чистым CSS на странице архива продукта Woocommerce.

В моем 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

Это потому, что вы используете background-image для элемента <li>, в отличие от самого элемента <img>. Поскольку это родительский элемент изображения, фон никогда не будет отображаться над самим изображением.

Если вы хотите сохранить фоновое изображение на родительском элементе, вы можете просто добавить правило opacity:0; для дочернего элемента <img> при наведении курсора.

, например

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

Устанавливает непрозрачность изображения на 0 при наведении указателя мыши на родительский элемент <li>.

Другой вариант - добавить контейнер к элементу <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 на изображениях, поэтому вам нужно добавить элемент контейнера для изображения

С элементом контейнера изображения HTML для этого конкретного элемента <li> должен выглядеть следующим образом:

<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

Я опаздываю на вечеринку ... но это работает

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

Где 223px 224px - размер контейнера img.

Answer 3

Проблема в том, что исходное изображение является тегом изображения, а не фоном. То, что вы делаете, это добавление фона позади div продукта, который идет за всем продуктом, включая изображение для него. Не существует способа заменить источник изображения CSS, но вы можете сделать это с помощью Javascript. Заменить изображение на javascript