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

Question

好的，所以我正在制作自己的由卡片组成的javascript幻灯片。现在，我正在添加/循环浏览卡片，并添加事件监听器（鼠标悬停和鼠标移出）以检查用户是否将鼠标悬停在所选卡片上。

现在是问题所在。我需要能够定位用户选择的所有卡之前的所有卡（第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

我会使用CSS及其同级选择器：

.card {
    background-color: red;
}

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

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

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

您可以分别为组/第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>

如果您想保留颜色直到下一次悬停，只需删除 mouseout 侦听器，并将其逻辑设置为在if块之后立即开始鼠标悬停侦听器。