Question

当我将鼠标悬停在元素上时，我想显示项目的描述。我试图通过选择所有具有相同clas的商品并使用forEach添加事件来实现购买，但是我该如何切换我所徘徊的商品的描述？我试图使用它，但这没有帮助。

这是我的代码：

const product = document.querySelectorAll('.products__item');
const description = document.querySelectorAll('.item__description');


product.forEach(element => {
    element.addEventListener('mouseenter', function() {
        this.description.style.visibility = 'visiable';
    })
});

<div class="products__row">
            <div class="products__item">
                <img src="images/products/5.png" alt="">
                <p class="item__description">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco</p>
            </div>
            <div class="products__item">
                <img src="images/products/6.png" alt="">
                <p class="item__description">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco</p>
            </div>
            <div class="products__item">
                <img src="images/products/7.png" alt="">
                <p class="item__description">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco</p>
            </div>
            <div class="products__item">
                <img src="images/products/8.png" alt="">
                <p class="item__description">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco</p>
            </div>
        </div>

Answer 1

足够简单，只需要使用CSS即可，不需要任何JavaScript。

.products__item .item__description {
  visibility: hidden;
}

.products__item:hover .item__description {
  visibility: visible;
}

<div class="products__row">
  <div class="products__item">
    <img src="http://placekitten.com/100/100" alt="">
    <p class="item__description">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco</p>
  </div>
  <div class="products__item">
    <img src="http://placekitten.com/100/100" alt="">
    <p class="item__description">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco</p>
  </div>
  <div class="products__item">
    <img src="http://placekitten.com/100/100" alt="">
    <p class="item__description">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco</p>
  </div>
  <div class="products__item">
    <img src="http://placekitten.com/100/100" alt="">
    <p class="item__description">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco</p>
  </div>
</div>

但是您的问题是，您引用的描述错误并且拼写可见。

const product = document.querySelectorAll('.products__item');
const description = document.querySelectorAll('.item__description');

product.forEach((element, index) => {
  element.addEventListener('mouseenter', function() {
    description[index].style.visibility = 'visible';
  })
  element.addEventListener('mouseleave', function() {
    description[index].style.visibility = 'hidden';
  })
});

.item__description {
  visibility: hidden;
}

<div class="products__row">
  <div class="products__item">
    <img src="http://placekitten.com/100/100" alt="">
    <p class="item__description">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco</p>
  </div>
  <div class="products__item">
    <img src="http://placekitten.com/100/100" alt="">
    <p class="item__description">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco</p>
  </div>
  <div class="products__item">
    <img src="http://placekitten.com/100/100" alt="">
    <p class="item__description">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco</p>
  </div>
  <div class="products__item">
    <img src="http://placekitten.com/100/100" alt="">
    <p class="item__description">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco</p>
  </div>
</div>

Answer 2

仅使用CSS更好。

/* Hide the p sibling by default */
.products__item > img + p {
  display:none;
}

/* When the image is hovered, show the p sibling */
.products__item > img:hover + p {
  display:block;
}

<div class="products__row">
            <div class="products__item">
                <img src="images/products/5.png" alt="img">
                <p class="item__description">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco</p>
            </div>
            <div class="products__item">
                <img src="images/products/6.png" alt="img">
                <p class="item__description">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco</p>
            </div>
            <div class="products__item">
                <img src="images/products/7.png" alt="img">
                <p class="item__description">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco</p>
            </div>
            <div class="products__item">
                <img src="images/products/8.png" alt="img">
                <p class="item__description">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco</p>
            </div>
        </div>

在mouseenter上更改div的背景并显示说明

2 个答案: