时间戳

首页 > 解决方案 > 悬停时的数据背景

javascript - 悬停时的数据背景

问题描述

所以我的问题很简单。我需要一些改变产品背景的 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€&lt;/span>
                         </div>
                    </div>
             </div>

当悬停在上方时<div class="collection-product-image">，我希望第一个数据 bg 是不可见的，第二个是可见的

谢谢

标签： javascripthtmlcss

解决方案

如果对你有帮助 

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

推荐阅读