css 所有小块同时改变颜色querySelectorAll()问题

hmmo2u0o 于 2022-11-26 发布在其他

关注(0)|答案(1)|浏览(130)

When I hover over bigger blocks (the blue ones) all the small block change to black at once.
I want only to change the color of the small block inside the hovered blue block not all of them.
Also, I know with CSS (pseudo-selector, :hover ) can do the same but I want to do it with JS as I said this is not my main code.

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 .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>

css

来源：https://stackoverflow.com/questions/74582253/all-the-small-blocks-change-color-at-once-queryselectorall-problem

1条答案

按热度按时间

slsn1g291#

Prev: Use the index of the hovered element.
Prev Update: I've added an extra snippet in order if you wanted to remove the effect after the mouse leave.
Updated: For selecting whatever red boxes are in the blue box, use querySelectorAll and do an iteration.

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>

赞(0）回复(0）举报 2022-11-26

我来回答

css 所有小块同时改变颜色querySelectorAll()问题

1条答案

相关问题

热门标签

最新问答