在鼠标输入时更改 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>

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>