CODEWITHSUNDEEP
javascript
Noamaan Mulla
Noamaan Mulla

Reputation: 77

How to add Eventlisteners to all elements of a class but execute it only for a particular element during mouseover?

I've been trying to write a javascript code in which the user will be displayed three options (Purchase, Add to cart, Add to wishlists), whenever they will hover above an image of a book. The problem is that all the options for all the books are shown simultaneously when I hover above any image. Is there any way to display options only for the particular book on which the cursor is over.

let images = document.getElementsByClassName('images');
let options = document.getElementsByClassName('options');

for (const index of options)
    {index.style.display = 'none';}

for (index = 0; index < images.length; index++) {
    images[index].addEventListener('mouseover', () => {
        for (const iterator of options) {
            iterator.style.display = 'inline-block';
        }
    });
}

for (index = 0; index < images.length; index++) {
    images[index].addEventListener('mouseout', () => {
        for (const iterator of options) {
            iterator.style.display = 'none';
        }
    });
}
.slider {
    display: flex;
    justify-content: space-between;
    margin: 25px 0px;
}
.book {display: inline-block; position: relative;}
.book a {display: block; width: 20vw;}
.info {
    display: block;
    text-align: center;
    text-decoration: none;
    color: rgb(90, 90, 90);
    font-size: 17px;
    font-weight: 500;
    transition: color 250ms;
}
.info:hover {color: rgb(255, 0, 0);}
.book a:hover {color: rgb(255, 0, 0);}
.book .info:last-of-type {margin-top: 5px;}
.book_price {text-align: center; margin: 10px 0px;}
.book_price p {
    display: inline;
    color: rgb(90, 90, 90);
    font-size: 17px;
    font-weight: 500;
    margin: 10px 5px;
}
.book_price span:last-of-type p {color: rgb(255, 0, 0);}
.options {
    background-color: rgba(255, 255, 255, 0.7);
    display: inline-block;
    position: absolute;
    bottom: 250px;
    right: 62px;
    padding: 10px;
}
.options a {
    display: inline-block;
    color: rgb(90, 90, 90);
    font-size: 22px;
    padding: 5px 10px;
    width: auto;
    transition: color 250ms;
}
.options a:nth-of-type(2) {border-right: 1px solid rgb(50, 50, 50); border-left: 1px solid rgb(50, 50, 50);}
<link rel="stylesheet" href="https://kit-pro.fontawesome.com/releases/v5.15.1/css/pro.min.css">
<div class="slider">
  <div class="book" class="book_1">
    <a href="#" style="padding: 0px;"><img src="http://www.cliometrics.com/bbw/images/product/1.png" class="images"></a>
    <div class="options">
      <a href="#"><i class="fal fa-plus"></i></a>
      <a href="#"><i class="fal fa-shopping-cart"></i></a>
      <a href="#"><i class="fal fa-heart"></i></a>
    </div>
    <a href="#" class="info" style="margin-top: 15px;">$10,000,000 Marraige Proposal</a>
    <a href="#" class="info">-James Patterson</a>
    <div class="book_price">
      <span><del><p>&#8377;200.00</p></del></span>
      <span><p>&#8377;160.00</p></span>
    </div>
  </div>
  <div class="book" id="book_2">
    <a href="#" style="padding: 0px;"><img src="http://www.cliometrics.com/bbw/images/product/2.png" class="images"></a>
    <div class="options">
      <a href="#"><i class="fal fa-plus"></i></a>
      <a href="#"><i class="fal fa-shopping-cart"></i></a>
      <a href="#"><i class="fal fa-heart"></i></a>
    </div>
    <a href="#" class="info" style="margin-top: 15px;">How to write your first Book</a>
    <a href="#" class="info">-Reader's Digest</a>
    <div class="book_price">
      <span><del><p>&#8377;400.00</p></del></span>
      <span><p>&#8377;260.00</p></span>
    </div>
  </div>
  <div class="book" class="book_3">
    <a href="#" style="padding: 0px;"><img src="http://www.cliometrics.com/bbw/images/product/3.png" class="images"></a>
    <div class="options">
      <a href="#"><i class="fal fa-plus"></i></a>
      <a href="#"><i class="fal fa-shopping-cart"></i></a>
      <a href="#"><i class="fal fa-heart"></i></a>
    </div>
    <a href="#" class="info" style="margin-top: 15px;">10,000 Time saving Ideas</a>
    <a href="#" class="info">-G.H. Miller</a>
    <div class="book_price">
      <span><del><p>&#8377;300.00</p></del></span>
      <span><p>&#8377;150.00</p></span>
    </div>
  </div>
  <div class="book" class="book_4">
  <a href="#" style="padding: 0px;"><img src="http://www.cliometrics.com/bbw/images/product/4.png" class="images"></a>
  <div class="options">
    <a href="#"><i class="fal fa-plus"></i></a>
    <a href="#"><i class="fal fa-shopping-cart"></i></a>
    <a href="#"><i class="fal fa-heart"></i></a>
  </div>
  <a href="#" class="info" style="margin-top: 15px;">10,000 Time saving Ideas</a>
  <a href="#" class="info">-G.H. Miller</a>
   <div class="book_price">
     <span><del><p>&#8377;300.00</p></del></span>
     <span><p>&#8377;150.00</p></span>
   </div>
  </div>
  <div class="book" class="book_5">
    <a href="#" style="padding: 0px;"><img src="http://www.cliometrics.com/bbw/images/product/5.png" class="images"></a>
    <div class="options">
      <a href="#"><i class="fal fa-plus"></i></a>
      <a href="#"><i class="fal fa-shopping-cart"></i></a>
      <a href="#"><i class="fal fa-heart"></i></a>
    </div>
    <a href="#" class="info" style="margin-top: 15px;">10,000 Time saving Ideas</a>
    <a href="#" class="info">-G.H. Miller</a>
    <div class="book_price">
      <span><del><p>&#8377;300.00</p></del></span>
      <span><p>&#8377;150.00</p></span>
    </div>
  </div>
  <div class="book" class="book_6">
    <a href="#" style="padding: 0px;"><img src="http://www.cliometrics.com/bbw/images/product/6.png" class="images"></a>
    <div class="options">
      <a href="#"><i class="fal fa-plus"></i></a>
      <a href="#"><i class="fal fa-shopping-cart"></i></a>
      <a href="#"><i class="fal fa-heart"></i></a>
    </div>
    <a href="#" class="info" style="margin-top: 15px;">10,000 Time saving Ideas</a>
    <a href="#" class="info">-G.H. Miller</a>
    <div class="book_price">
      <span><del><p>&#8377;300.00</p></del></span>
      <span><p>&#8377;150.00</p></span>
    </div>
  </div>
</div>

Upvotes: 0

Views: 34

Answers (1)

Nathaniel Eskenazi
Nathaniel Eskenazi

Reputation: 171

You have to use the event object and the attribute target:

for (index = 0; index < images.length; index++) {
    images[index].addEventListener('mouseover', (event) => {
        for (const iterator of options) {
            event.target.style.display = 'inline-block'; // Use event.target
        }
    });
}

Upvotes: 2

Related Questions