Javascript: How do i target selected elements in a slideshow when hovering over one element?

Matt Published at Dev

Matt

Alright, so I'm working on my own javascript slideshow which consist of cards. Right now I'm adding/looping through the cards and adding an eventlistener (mouseover and mouseout) to check if the user hovered over chosen card.

Now to the problem. I need to be able to target all of the cards (part 1, see image) which comes before the chosen card of the user and also all of the cards (part 2, see image) which comes after. But I have to target them individually. Basically the cards in part 1 will get one kind of styling and the cards in part 2 will get another one. The chosen card will get its own styling.

This is what I have so far. If someone could point me in the right direction, that would be great, thanks. I don't want to use any libraries, strictly javascript.

var cards = [];
cards = document.querySelectorAll('.card');
for (var i = 0; i < cards.length; i++) {
  cards[i].addEventListener('mouseover', function() {
    //Do something
    console.log('Mouseover: Do something');
  });

  cards[i].addEventListener('mouseout', function() {
    //Do something
    console.log('Mouseout: Do something');
  });
}

.container {
  list-style: none;
  margin: 0px;
  padding: 0px;
}

.card {
  display: inline-block;
  background-color: #fff2cc;
  width: 100px;
  height: 150px;
  color: #000;
  text-align: center;
}

<ul class="container">
  <li class="card">Card-1</li>
  <li class="card">Card-2</li>
  <li class="card">Card-3</li>
  <li class="card">Card-4</li>
  <li class="card">Card-5</li>
</ul>

Ucho

You can set class for group/part 1, current card and group/part 2 separately.

You can possibly also listen to bubbling phase of event instead of multiple listener registration.

Check.

let ul = document.querySelectorAll('ul')[0];
ul.addEventListener('mouseover', function(e) {  
  
  if(e.target.className.indexOf("card") === -1) { return; }

  let currentFound = false;  
  document.querySelectorAll('.card').forEach(function(card) {
  
    if(card === e.target) { 
      card.classList.add("current-card");
      currentFound = true;
    }
    else
    if(currentFound) {
      card.classList.add("next-cards");
    } 
    else {
       card.classList.add("previous-cards");
    }});
});  


ul.addEventListener('mouseout', function() {
  document.querySelectorAll('.card').forEach(
    function(card) {
      card.classList.remove("previous-cards");
      card.classList.remove("next-cards"); 
      card.classList.remove("current-card");});
  });

.container {
  list-style: none;
  margin: 0px;
  padding: 0px;
}

.card {
  display: inline-block;
  background-color: #fff2cc;
  width: 100px;
  height: 150px;
  color: #000;
  text-align: center;
}

.previous-cards {
  background-color: crimson;
}

.next-cards {
  background-color: darkred;
}

.current-card {
  background-color: indianred;
}

<ul class="container">
  <li class="card">Card-1</li>
  <li class="card">Card-2</li>
  <li class="card">Card-3</li>
  <li class="card">Card-4</li>
  <li class="card">Card-5</li>
</ul>

If you would like to preserve the colors until next hovering just remove the mouseout listener and put its logic to start of mouseover listener right after if block.

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at2020-12-5

Comments

0 comments

TOP Ranking

Article

Javascript: How do i target selected elements in a slideshow when hovering over one element?

Javascript: How do i target selected elements in a slideshow when hovering over one element?

pump.io port in URL

How to import an asset in swift using Bundle.main.path() in a react-native native module

Failed to listen on localhost:8000 (reason: Cannot assign requested address)

Double spacing in rmarkdown pdf

SQL Server : need add a dot before two last character

C++ 16 bit grayscale gradient image from 2D array

JMeter: Why get error when try to save test plan

JWT gives JsonWebTokenError "invalid token"

How to make thrown errors visible outside of a Promise?

How to tell if iOS Today Widget is being updated in the background?

Calling Doctrine clear() with an argument is deprecated

Capybara Selenium Chrome opens About Google Chrome

How to update azerothcore-wotlk docker container

Adding Ripple Effect to RecyclerView item

mysql.connector.errors.InterfaceError: 2003: Can't connect to MySQL server on '127.0.0.1:3306' (111 Connection refused)

Error while applying filter on dataframe - PySpark

Unable to add slack to bluemix project

MyPy fails dataclass argument with optional list of objects type

How can I validate and parse phone numbers to extract their country calling code and area code?

Single Sign-On in Spring by using SAML Extension and Shibboleth

python how to create many-to-many of lists inside one list