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

Question

好的，我正在制作自己的 javascript 幻灯片，其中包含卡片。现在我正在 adding/looping 查看卡片并添加一个事件侦听器（鼠标悬停和鼠标移出）以检查用户是否将鼠标悬停在所选卡片上。

现在进入正题。我需要能够定位用户所选卡片之前的所有卡片（第 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)获取元素索引，然后循环遍历具有lower/higher索引的元素。

Answer 2

您可以 select 特定的卡并使用 jquery 应用 class 名称。

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，这将是所有卡片的通用。

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

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

Answer 3

您可以为group/part 1、当前卡和group/part 2分别设置class。

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

检查。

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 块之后立即开始鼠标悬停侦听器。

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

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

javascript

slideshow