Javascript：将鼠标悬停在一个元素上时，如何定位幻灯片中的选定元素？

Question

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> 

Answer 1

I would do this with CSS and it's sibling selector:

.card {
    background-color: red;
}

.card:hover ~ .card {
    background-color: green;
}

If you need to use JavaScript, use [...mouseEnterCard.parentElement.children].indexOf(mouseEnterCard) to get the element index and then loop over the elements with a lower/higher index.

Answer 2

You can select the particular card and apply class name using jquery.

 var cards = []; cards = document.querySelectorAll('.card'); for (var i = 0; i < cards.length; i++) { cards[i].addEventListener('mouseover', function() { //Do something $(this).addClass('selected'); console.log('Mouseover: Do something'); }); cards[i].addEventListener('mouseout', function() { //Do something $(this).removeClass('selected'); 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; } .selected{ background-color: blue; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <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> 

you can even use simple css which will be comman for all the card.

when card class is hovered this css will execute.

.card:hover{
  background-color: blue;
}

Answer 3

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.