On mouseenter change background of the div and show description

Question

I want to display description for an item while i hover on element. I am trying to achive the buy selecting all of the items becouse they have same clas, and using forEach adding event to them, but how can i toggle description of the item that I am hovering ? I was trying to use this but this wasn't helpfull.

This is my code:

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>

Possible duplicate of: https://stackoverflow.com/questions/19655189/javascript-click-event-listener-on-class — jmdatasci, Jun 11 '19 at 17:39

score 1 · Accepted Answer · answered Jun 11 '19 at 17:46

Simple enough to just use CSS and no need for any 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>

But your issue is you are referencing the description wrong and spelled visible wrong.

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>

score 0 · Answer 2 · answered Jun 11 '19 at 19:06

This is much better done with just 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>

On mouseenter change background of the div and show description

2 Answers2