Javascript:当悬停在一个元素上时，如何针对幻灯片中选定的元素？

Question

好的，我正在写我自己的javascript幻灯片，它由卡片组成。现在，我在卡片中添加/循环，并添加一个事件侦听器(mouseover和mouseout)来检查用户是否徘徊在所选卡上。

现在是问题所在。我需要能够瞄准所有的卡片(第1部分，见图像)，这是在用户选择的卡片之前，也是所有的卡片(第2部分，见图像)之后。但我必须把他们作为目标。基本上，第1部分中的卡片将得到一种样式，而第2部分中的卡片将得到另一种样式。选择的卡片会有自己的造型。

​

​

这就是我到目前为止所拥有的。如果有人能给我指明正确的方向，那就太好了，谢谢。我不想使用任何库，严格地说是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

您可以分别为组/第1部分、当前卡和组/第2部分设置类。

您也可以监听事件的冒泡阶段，而不是多个侦听器注册。

检查一下。

​

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>

​

如果您希望保留颜色直到下一个悬停，只需删除鼠标出侦听器，并将其逻辑启动鼠标超过侦听器后，立即如果阻塞。

Answer 2

您可以选择特定的卡并使用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>

​

你甚至可以使用简单的css，这将是逗号的所有卡。

当卡类悬停时，此css将执行。

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

Answer 3

我会用CSS和它的同胞选择器来完成这个任务：

.card {
    background-color: red;
}

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

如果需要使用JavaScript，请使用[...mouseEnterCard.parentElement.children].indexOf(mouseEnterCard)获取元素索引，然后循环使用索引较低/更高的元素。