主页 / 问题 / 1528810
Accepted
powerg
Asked:2023-07-04 06:46:18 +0000 UTC2023-07-04 06:46:18 +0000 UTC

如何将一个类应用于悬停时的不同块？

  • 772

当您将鼠标悬停在卡片上时，图片会发生变化，问题是当您将鼠标悬停在第一个产品卡上时，第二个产品卡也开始消失。告诉我如何分别为每张卡应用悬停？谢谢

const galleryItems = document.querySelectorAll('.product-card__item');

if (galleryItems) {
    galleryItems.forEach(item => {
        item.addEventListener("mouseenter", function (e) {
            galleryItems.forEach(el => { el.classList.remove('_active'); });
            item.classList.add('_active')
        });
        item.addEventListener("mouseleave", function (e) {
            galleryItems.forEach(el => { el.classList.remove('_active'); });
            galleryItems[0].classList.add('_active')
        });
    });
}
.product__body{
  display: flex;
}

.products__column{
  flex: 0 1 auto;
  margin: 0px 20px 0px 0px;
}

.product-card__images {
  display: flex;
  position: relative;
  height: 363px;
  width: 300px;
}

a {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  display: block;
  left: 0;
}

img {
  transition: opacity 0.2s ease-in-out;
  position: absolute;
  margin: auto;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  border: 0;
  vertical-align: middle;
  max-width: 100%;
  max-height: 100%;
  pointer-events: none;
  opacity: 0;
}

.product-card__item._active img{
  opacity: 1;
}

.product-card__items{
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        display: flex;
        flex-direction: row;
        z-index: 2;
    }

.product-card__item{
        flex-grow: 1;
        -webkit-box-flex: 1;
        -ms-flex-positive: 1;
        background-color: #fff;
        background: 0 0;
        margin: 0px 2px;
    }
<div class="product__body">
  <div class="products__column product-card">
    <div class="product-card__images">
      <a href="#">
        <span class="product-card__items">
          <span class="product-card__item _active">
            <img src="https://kisa.club/uploads/posts/2023-03/1679858194_kisa-club-p-stilnie-komplekti-odezhdi-instagram-4.jpg" alt>
          </span>
          <span class="product-card__item">
            <span class="product-card__item-nav"></span>
            <img src="https://kisa.club/uploads/posts/2023-04/1680336969_kisa-club-p-stil-odezhdi-devochki-krasivo-1.jpg" alt>
          </span>
        </span>
      </a>
    </div>
  </div>

  <div class="products__column product-card">
    <div class="product-card__images">
      <a href="#">
        <span class="product-card__items">
          <span class="product-card__item _active">
            <img src="https://kisa.club/uploads/posts/2023-03/1679858194_kisa-club-p-stilnie-komplekti-odezhdi-instagram-4.jpg" alt>
          </span>
        </span>
      </a>
    </div>
  </div>
</div>

javascript

1 个回答

  1. Best Answer

    不用js也可以。仅使用悬停。

    .product__body{
  display: flex;
}


.products__column{
  flex: 0 1 auto;
  margin: 0px 20px 0px 0px;
}

.product-card__images {
  display: flex;
  position: relative;
  height: 363px;
  width: 300px;
}

a {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  display: block;
  left: 0;
}

img {
  transition: opacity 0.2s ease-in-out;
  position: absolute;
  margin: auto;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  border: 0;
  vertical-align: middle;
  max-width: 100%;
  max-height: 100%;
  pointer-events: none;
  opacity: 1;
}

.product-card__items{
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        display: flex;
        flex-direction: row;
        z-index: 2;
    }
    
  
.product-card__items:hover .product-card__item:first-child img{
      opacity: 0;
}
    
.product-card__items .product-card__item:nth-child(2) img{
      opacity: 0;
}
    
.product-card__items:hover .product-card__item:nth-child(2) img {
     opacity: 1;
}


.product-card__item{
        flex-grow: 1;
        -webkit-box-flex: 1;
        -ms-flex-positive: 1;
        background-color: #fff;
        background: 0 0;
        margin: 0px 2px;
    }
    <div class="product__body">
  <div class="products__column product-card">
    <div class="product-card__images">
      <a href="#">
        <span class="product-card__items">
          <span class="product-card__item">
            <img src="https://kisa.club/uploads/posts/2023-03/1679858194_kisa-club-p-stilnie-komplekti-odezhdi-instagram-4.jpg" alt>
          </span>
          <span class="product-card__item">
            <span class="product-card__item-nav"></span>
            <img src="https://kisa.club/uploads/posts/2023-04/1680336969_kisa-club-p-stil-odezhdi-devochki-krasivo-1.jpg" alt>
          </span>
        </span>
      </a>
    </div>
  </div>

  <div class="products__column product-card">
    <div class="product-card__images">
      <a href="#">
        <span class="product-card__items">
          <span class="product-card__item">
            <img src="https://kisa.club/uploads/posts/2023-03/1679858194_kisa-club-p-stilnie-komplekti-odezhdi-instagram-4.jpg" alt>
          </span>
        </span>
      </a>
    </div>
  </div>
</div>

    如果你从js解析你的代码。您最初获取 elements 的整个集合product-card__item，这并不完全正确，因为它们有不同的父级。因此，当鼠标悬停在任何地方时，您会删除所有父容器中的类_active，而不仅仅是您悬停在其上的容器中的类。作为一种选择，父块可以作为元素的初始集合product-card__items。当鼠标悬停在它上面时，它已经与特定的后代一起工作product-card__item。

    const galleryItems = document.querySelectorAll('.product-card__items');

if (galleryItems) {
galleryItems.forEach(item => {
    item.addEventListener("mouseenter", function (e) {
        item.querySelector('.product-card__item:first-child').classList.remove('_active');
        item.querySelector('.product-card__item:nth-child(2)').classList.add('_active');
    });
    item.addEventListener("mouseleave", function (e) {
        item.querySelector('.product-card__item:first-child').classList.add('_active');
        item.querySelector('.product-card__item:nth-child(2)').classList.remove('_active');
    });
});
}
       body {
  background: transparent; /* Make it white if you need */
  color: #fcbe24;
  padding: 0 24px;
  margin: 0;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

.product__body{
  display: flex;
}

.products__column{
  flex: 0 1 auto;
  margin: 0px 20px 0px 0px;
}

.product-card__images {
  display: flex;
  position: relative;
  height: 363px;
  width: 300px;
}

a {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  display: block;
  left: 0;
}

img {
  transition: opacity 0.2s ease-in-out;
  position: absolute;
  margin: auto;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  border: 0;
  vertical-align: middle;
  max-width: 100%;
  max-height: 100%;
  pointer-events: none;
  opacity: 0;
}

.product-card__item._active img{
  opacity: 1;
}

.product-card__items{
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    flex-direction: row;
    z-index: 2;
}

.product-card__item{
    flex-grow: 1;
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    background-color: #fff;
    background: 0 0;
    margin: 0px 2px;
}
    <div class="product__body">
  <div class="products__column product-card">
    <div class="product-card__images">
      <a href="#">
        <span class="product-card__items">
          <span class="product-card__item _active">
            <img src="https://kisa.club/uploads/posts/2023-03/1679858194_kisa-club-p-stilnie-komplekti-odezhdi-instagram-4.jpg" alt>
          </span>
          <span class="product-card__item">
            <span class="product-card__item-nav"></span>
            <img src="https://kisa.club/uploads/posts/2023-04/1680336969_kisa-club-p-stil-odezhdi-devochki-krasivo-1.jpg" alt>
          </span>
        </span>
      </a>
    </div>
  </div>


  <div class="products__column product-card">
<div class="product-card__images">
  <a href="#">
    <span class="product-card__items">
      <span class="product-card__item _active">
        <img src="https://kisa.club/uploads/posts/2023-03/1679858194_kisa-club-p-stilnie-komplekti-odezhdi-instagram-4.jpg" alt>
      </span>
       <span class="product-card__item">
        <span class="product-card__item-nav"></span>
        <img src="https://kisa.club/uploads/posts/2023-04/1680336969_kisa-club-p-stil-odezhdi-devochki-krasivo-1.jpg" alt>
      </span>
    </span>
  </a>
</div>
  </div>
</div>

    • 1

相关问题