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

Question

我想在将鼠标悬停在元素上时显示项目的描述。我试图实现购买选择所有项目，因为它们具有相同的类，并使用 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>