如何使用 JavaScript 仅更改悬停时嵌套元素的颜色？

问题描述 投票：0回答：2

当我将鼠标悬停在较大的块（蓝色块）上时，所有小块立即变为黑色。我想改变悬停的蓝色块内的小块的颜色，而不是全部。

我知道这可以通过 CSS 使用 :hover 伪选择器来完成，但我想针对我的特定用例使用 JavaScript 来完成。

这是我当前的代码：

const smallContainer = document.querySelectorAll(".small-container");
const logoContainer = document.querySelectorAll(".logo-container");

smallContainer.forEach((value) => {
  value.addEventListener("mouseover", () => {
    logoContainer.forEach((valuein) => {
      valuein.classList.remove("logo-container");
      valuein.classList.add("logo-container-animation");
    });
  });
});
.main-container {
  display: flex;
  width: 100%;
  height: 100vh;
  justify-content: space-between;
}

.small-container {
  height: 200px;
  width: 200px;
  background-color: blue;
  transition: all 0.5s;
  display: flex;
  align-items: center;
  justify-content: center;
}

.logo-container {
  height: 25px;
  width: 25px;
  background-color: rgb(255, 0, 0);
}

.logo-container-animation {
  background-color: rgb(0, 0, 0);
  height: 25px;
  width: 25px;
  transition: all 2s;
}
<div class="main-container">
  <div class="small-container"><span class="logo-container"></span></div>
  <div class="small-container"><span class="logo-container"></span></div>
  <div class="small-container"><span class="logo-container"></span></div>
  <div class="small-container"><span class="logo-container"></span></div>
</div>

问题：

如何修改我的 JavaScript 代码，以便只有悬停的蓝色块内的小块改变颜色，而不是所有小块？

谢谢您的帮助！

javascript html css
2个回答
0
投票

如果你有 2 个区块，这就是答案

const smallContainer = document.querySelectorAll(".small-container")
const logoContainer = document.querySelectorAll(".logo-container")

smallContainer.forEach((value, index) => {
value.addEventListener("mouseover", () => {
logoContainer.forEach((valuein, indexin) => {
if (indexin == 0) {
logoContainer[index * 2].classList.remove("logo-container")
logoContainer[index * 2].classList.add("logo-container-animation")

}
else {
logoContainer[index * 2 + 1].classList.remove("logo-container")
logoContainer[index * 2 + 1].classList.add("logo-container-animation")

}
})

})
})
smallContainer.forEach((value, index) => {
value.addEventListener("mouseleave", () => {
logoContainer.forEach((valuein, indexin) => {
if (indexin == 0) {
logoContainer[index * 2].classList.remove("logo-container-animation")
logoContainer[index * 2].classList.add("logo-container")

}
else {
logoContainer[index * 2 + 1].classList.remove("logo-container-animation")
logoContainer[index * 2 + 1].classList.add("logo-container")

}
})

})
})
.main-container {
display: flex;
width: 100%;
height: 100vh;
justify-content: space-between;
}

.small-container {
 height: 200px;
width: 200px;
background-color: blue;
transition: all .5s;
display: flex;
align-items: center;
justify-content: center;
}

.logo-container {
height: 25px;
width: 25px;
background-color: rgb(255, 0, 0);
transition: all .5s;
}

.logo-container-animation {
background-color: rgb(0, 0, 0);
height: 25px;
width: 25px;
transition: all .5s;
}
<!DOCTYPE html>
<heard>
</heard>
<html>

<body>
    <div class="main-container">
        <div class="small-container"><span class="logo-container"></span><span class="logo-container"></span></div>
        <div class="small-container"><span class="logo-container"></span><span class="logo-container"></span></div>
        <div class="small-container"><span class="logo-container"></span><span class="logo-container"></span></div>
        <div class="small-container"><span class="logo-container"></span><span class="logo-container"></span></div>
    </div>

</body>

</html>

0
投票

上一篇： 使用悬停元素的索引。
上一次更新：如果您想在鼠标离开后删除效果，我已经添加了一个额外的片段。
更新： 要选择蓝色框中的任何红色框，请使用 

querySelectorAll
并进行迭代。
Roko C. Buljan 的评论：使用 
mouseenter
而不是 
mouseover
。 原因

const smallContainer = document.querySelectorAll(".small-container")
const logoContainer = document.querySelectorAll(".logo-container")

smallContainer.forEach((value, i) => {
  const logoContainers = value.querySelectorAll(".logo-container")

  value.addEventListener("mouseover", () => {
    /* Prev
      logoContainer[i].classList.remove("logo-container");
      logoContainer.classList.add("logo-container-animation")
    */
    // <!-------- UPDATED: 👇 --------!>
    logoContainers.forEach(elm => {
      elm.classList.remove("logo-container")
      elm.classList.add("logo-container-animation")
    })
    // <!-------- UPDATED: 👆 --------!>
  })
  // <!-------- EXTRA: 👇 --------!> 
  value.addEventListener("mouseleave", () => {
    /* Prev
      logoContainer[i].classList.add("logo-container");
      logoContainer.classList.remove("logo-container-animation")
    */
    // <!-------- UPDATED: 👇 --------!>
    logoContainers.forEach(elm => {
      elm.classList.add("logo-container")
      elm.classList.remove("logo-container-animation")
    })
    // <!-------- UPDATED: 👆 --------!>
  })
})
.main-container {
  display: flex;
  width: 100%;
  height: 100vh;
  justify-content: space-between;
}

.small-container {
  height: 200px;
  width: 200px;
  background-color: blue;
  transition: all .5s;
  display: flex;
  align-items: center;
  justify-content: center;
}

.logo-container {
  height: 25px;
  width: 25px;
  background-color: rgb(255, 0, 0);
  transition: all 2s;
}

.logo-container-animation {
  background-color: rgb(0, 0, 0);
  height: 25px;
  width: 25px;
  transition: all 2s;
}
<div class="main-container">
  <div class="small-container">
    <span class="logo-container"></span>
    <span class="logo-container"></span>
  </div>
  <div class="small-container">
    <span class="logo-container"></span>
  </div>
  <div class="small-container">
    <span class="logo-container"></span>
  </div>
  <div class="small-container">
    <span class="logo-container"></span>
  </div>
</div>

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.