当我将鼠标悬停在较大的块(蓝色的)上时，所有的小块都会立即变成黑色。
我只想改变悬停的蓝色块内的小块的颜色，而不是所有的。
另外，我知道CSS(伪选择器，:hover)可以做同样的事情，但我想用JS做，因为我说这不是我的主代码。
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>如果你有两个block
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>
前文:使用悬停元素的索引。
:更新:如果你想在鼠标离开后删除效果，我已经添加了一个额外的代码片段。
更新:要在蓝框中选择任何红框，请使用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>