当没有选择任何元素时如何在元素之间交替类并返回原始

Question

我想请求您的帮助。这就是我想要做的。

我有一个包含六个项目的网格。我想让第一个项目默认处于活动状态，当用户将鼠标移动到五个剩余网格项目之一上时，该类将从第一个项目中删除并应用当前选定的项目。一旦没有光标在它上面的对象。该类将自动再次应用于第一个元素。

const cards = document.querySelectorAll('.card');

function cardSelect() {
  cards.forEach(card => {
    card.addEventListener('mouseenter', () => {
      card.classList.add('active');
    });
    card.addEventListener('mouseleave', () => {
      card.classList.remove('active');
    });

    //If there's no actived element, then apply active class to the first item
    if (!card.classList.contains('active')) {
      cards[0].classList.add('active');
      //If there's any actived element, then remove the active class from the first item
    } else {
      cards[0].classList.remove('active');
    }
  })
}
cardSelect();

.grid {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 200px);
  grid-template-areas: "item1 item2 item3" "item4 item5 item6";
}


/* line 1152, ../../PCX/sass/scss/style.scss */

.grid .card {
  color: #fff;
  font-size: 2rem;
  background-color: #0077ff;
  display: flex;
  align-items: center;
  justify-content: center;
}


/* line 1160, ../../PCX/sass/scss/style.scss */

.grid .card.active {
  background-color: #0000ee;
}


/* line 1164, ../../PCX/sass/scss/style.scss */

.grid .item1 {
  grid-area: item1;
}


/* line 1167, ../../PCX/sass/scss/style.scss */

.grid .item2 {
  grid-area: item2;
}


/* line 1170, ../../PCX/sass/scss/style.scss */

.grid .item3 {
  grid-area: item3;
}


/* line 1173, ../../PCX/sass/scss/style.scss */

.grid .item4 {
  grid-area: item4;
}


/* line 1176, ../../PCX/sass/scss/style.scss */

.grid .item5 {
  grid-area: item5;
}


/* line 1179, ../../PCX/sass/scss/style.scss */

.grid .item6 {
  grid-area: item6;
}

<div class="grid">
  <div class="item1 card">ITEM 1</div>
  <div class="item2 card">ITEM 2</div>
  <div class="item3 card">ITEM 3</div>
  <div class="item4 card">ITEM 4</div>
  <div class="item5 card">ITEM 5</div>
  <div class="item6 card">ITEM 6</div>
</div>

你们能帮帮我吗？这是一个逻辑问题，缺乏js知识。

Answer 1

我认为，每当光标输入或离开卡片时，您都可以将它们全部清除（我放在一个函数中）。

如果它进入卡片，则将活动类添加到这张卡片。

如果它留下一张卡片，则将活动类别设置为第一张卡片。

const cards = document.querySelectorAll('.card');
cards[0].classList.add('active');

function clearAll() {
  cards.forEach(card => card.classList.remove('active'));
}

cards.forEach(card => {
    card.addEventListener('mouseenter', () => {
      clearAll();
      card.classList.add('active');
    });
    card.addEventListener('mouseleave', () => {
      clearAll()
      cards[0].classList.add('active');
    });
})

.grid {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 200px);
  grid-template-areas: "item1 item2 item3" "item4 item5 item6";
}


/* line 1152, ../../PCX/sass/scss/style.scss */

.grid .card {
  color: #fff;
  font-size: 2rem;
  background-color: #0077ff;
  display: flex;
  align-items: center;
  justify-content: center;
}


/* line 1160, ../../PCX/sass/scss/style.scss */

.grid .card.active {
  background-color: #0000ee;
}


/* line 1164, ../../PCX/sass/scss/style.scss */

.grid .item1 {
  grid-area: item1;
}


/* line 1167, ../../PCX/sass/scss/style.scss */

.grid .item2 {
  grid-area: item2;
}


/* line 1170, ../../PCX/sass/scss/style.scss */

.grid .item3 {
  grid-area: item3;
}


/* line 1173, ../../PCX/sass/scss/style.scss */

.grid .item4 {
  grid-area: item4;
}


/* line 1176, ../../PCX/sass/scss/style.scss */

.grid .item5 {
  grid-area: item5;
}


/* line 1179, ../../PCX/sass/scss/style.scss */

.grid .item6 {
  grid-area: item6;
}

<div class="grid">
  <div class="item1 card">ITEM 1</div>
  <div class="item2 card">ITEM 2</div>
  <div class="item3 card">ITEM 3</div>
  <div class="item4 card">ITEM 4</div>
  <div class="item5 card">ITEM 5</div>
  <div class="item6 card">ITEM 6</div>
</div>

Answer 2

好消息是您不需要 JavaScript 来执行此操作 - CSS 可以解决问题（请参阅代码注释）

/* no js needed */

.grid {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 200px);
  /* 
    You don't need grid areas for this layout :-) 
  */
}


/* 
  The trick 
  if you are not hovering the grid .grid:not(:hover) 
  then set the active color on .item1.card

  if you are hovering a card .card:hover set the active 
  color on that
  
  when you are hovering a card you are also hovering the 
  grid why the item1.card will turn back to normal...
  unless you hover it – then it uses the .card:hover rule    
 
  I hope it made sense :-)

*/
.grid:not(:hover) .item1.card,
.card:hover {
  background-color: #0000ee;
}  


.card {
  color: #fff;
  font-size: 2rem;
  background-color: #0077ff;
  display: flex;
  align-items: center;
  justify-content: center;
}

<div class="grid">
  <div class="item1 card">ITEM 1</div>
  <div class="item2 card">ITEM 2</div>
  <div class="item3 card">ITEM 3</div>
  <div class="item4 card">ITEM 4</div>
  <div class="item5 card">ITEM 5</div>
  <div class="item6 card">ITEM 6</div>
</div>