Итак, моя проблема довольно проста. Мне нужен код javascript, который меняет фон продукта. Я понятия не имею, как это сделать, вот почему я спрашиваю вас.

                 <div class="col-lg-3 col-md-6 col-sm-6 w-50 pl-2 pr-2" id="collection-item" data-aos="zoom-in-up" data-aos-duration="1100">
                    <div class="collection-product">
                        <div class="collection-product-image">
                                <div class="collection-product-image_label-soon"> <span>Soon</<span>
                                </div>
                                <div data-bg="/images/test3.jpg" class="collection-product_image first lazyloaded" style="background-image: url(/images/test3.jpg);"></div>
                                <div data-bg="/images/test2.jpg" class="collection-product_image second lazyloaded" style="background-image: url(/images/test2.jpg);"></div>
                         </div>
                         <div class="collection-product_caption p-2">
                                <h3 class="font-italic mt-2 mb-0">New Collection</h3>
                                <span>49,99€</span>
                         </div>
                    </div>
             </div>

При наведении указателя мыши на <div class="collection-product-image"> я хочу, чтобы первые данные bg были невидимы, а вторые были видны

Спасибо

0
realdarkness 7 Июл 2021 в 19:02

3 ответа

Лучший ответ
.collection-product-image .second{
display:none;
}
.collection-product-image:hover .second{
display:block;
}
.collection-product-image:hover {
display:none;
}
0
Taj Khan 7 Июл 2021 в 16:07
.collection-product-image > .second{
display:none;
}
.collection-product-image:hover > .first{
display:none;
}
.collection-product-image:hover > .second{
display:block;
}
                 <div class="col-lg-3 col-md-6 col-sm-6 w-50 pl-2 pr-2" id="collection-item" data-aos="zoom-in-up" data-aos-duration="1100">
                    <div class="collection-product">
                        <div class="collection-product-image">
                                <div class="collection-product-image_label-soon"> <span>Soon</<span>
                                </div>
                                <div data-bg="/images/test3.jpg" class="collection-product_image first lazyloaded" style="background-image: url(/images/test3.jpg);"></div>
                                <div data-bg="/images/test2.jpg" class="collection-product_image second lazyloaded" style="background-image: url(/images/test2.jpg);"></div>
                         </div>
                         <div class="collection-product_caption p-2">
                                <h3 class="font-italic mt-2 mb-0">New Collection</h3>
                                <span>49,99€</span>
                         </div>
                    </div>
             </div>
0
Mohammad Ismail 7 Июл 2021 в 16:14

Если это поможет тебе

const images = document.querySelectorAll('[data-bg]')

const handleImageFn = image => {
  const originalImageUrl = image.style.backgroundImage
  const swapImageUrl = `url(${image.getAttribute('data-bg')})`

  image.addEventListener('mouseenter', () => {
    image.style.backgroundImage = swapImageUrl
  })

  image.addEventListener('mouseleave', () => {
    image.style.backgroundImage = originalImageUrl
  })
}

images.forEach(handleImageFn)
.collection-product {
  display: grid;
  grid-template-columns: 200px 200px;
  grid-column-gap: 1rem;
}

.collection-product_image {
  width: 200px;
  height: 300px;
}
<div class="collection-product">
  <div data-bg="https://picsum.photos/id/1/200/300" class="collection-product_image first lazyloaded" style="background-image: url(https://picsum.photos/id/2/200/300);"></div>
  <div data-bg="https://picsum.photos/id/3/200/300" class="collection-product_image second lazyloaded" style="background-image: url(https://picsum.photos/id/4/200/300);"></div>
</div>

JSFiddle

0
webapace 7 Июл 2021 в 17:06