如何将Javascript鼠标悬停css效果应用于具有相同类名的所有元素

Question

当用户悬停在text__container上时，我想将img__text的不透明度增加到1。我试图通过严格的CSS来实现这一点，方法是像这样影响text__container的子级，#text__container ~ .img__text，然后应用所需的CSS效果。

Index.html

<div class="gallery__container">
<div>
<img class="gallery__img" src="./images/image1.png" alt="">
<div id="text__container">
<span class="img__text">Shake & Shot</span>
</div>
</div>
<div>
<img class="gallery__img" src="./images/image2.png" alt="">
<div id="text__container">
<span class="img__text">It's On</span>
</div>
</div>
<div>
<img class="gallery__img" src="./images/image3.png" alt="">
<div id="text__container">
<span class="img__text">Shake & Shot</span>
</div>
</div>
<div>
<img class="gallery__img" src="./images/image4.png" alt="">
<div id="text__container">
<span class="img__text">Shake & Shot</span>
</div>
</div>
<div>
<img class="gallery__img" src="./images/image5.png" alt="">
<div id="text__container">
<span class="img__text">Shake & Shot</span>
</div>
</div>
<div>
<img class="gallery__img" src="./images/image6.png" alt="">
<div id="text__container">
<span class="img__text">Shake & Shot</span>
</div>
</div>
</div>

样式.scs

//Gallery
.gallery__container {
margin-top: 5%;
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-between;
div {
background-color: #000;
width: 49%;
margin: 0 0 2% 0;
height: 665px;
display: grid;

img {
grid-column: 1;
grid-row: 1;
height: 100%;
width: 100%;
z-index: 1;
align-content: center;
transition: 0.8s ease-out;
opacity: 1;
&:hover {
transition: 0.8s ease-in;
cursor: pointer;
opacity: 0.5;
}
}
#text__container {
border: 1px solid red;
text-align: center;
align-self: center;
grid-column: 1;
grid-row: 1;
background-color: rgba(0,0,0,0.5);
width: 100%;
height: 100%;
margin: 0;
z-index: 2;
background-color: transparent;
transition: 0.8s ease-out;
&:hover {
transition: 0.8s ease-in;
background-color: rgba(0,0,0,0.5);
}
.img__text {
border: 1px solid red;
text-align: center;
align-self: center;
z-index: 3;
color: #fff;
font-family: $main-font;
font-size: 2rem;
width: 50%;
margin: 0 auto;
transition: 0.8s ease-out;
opacity: 0;
}
}
}
}

Script.js

//Variables
var imgContainer = document.getElementById('text__container');
var imgText = document.getElementsByClassName('img__text');
for (i = 0; i < imgText.length; i++) {
imgContainer.addEventListener('mouseover', function() {
imgText[i].style.opacity = "1";
imgText[i].style.transition = "0.8s ease-in";
});
imgContainer.addEventListener('mouseleave', function(){
imgText[i].style.opacity = "0";
imgText[i].style.transition = "0.8s ease-out";
});
}

Answer 1

您有多个具有相同id的元素-将其更改为一个类。此外，如果要分配事件，代码需要在循环中使用let。最后是mouseout而不是mouseleave。

这是有效的。

var imgContainer = document.getElementsByClassName('text__container');
var imgText = document.getElementsByClassName('img__text');
for (let i = 0; i < imgText.length; i++) {
imgContainer[i].addEventListener('mouseover', function() {
imgText[i].style.opacity = "1";
imgText[i].style.transition = "0.8s ease-in";
});
imgContainer[i].addEventListener('mouseout', function(){
imgText[i].style.opacity = "0";
imgText[i].style.transition = "0.8s ease-out";
});
}

.gallery__container {
margin-top: 5%;
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-between;
div {
background-color: #000;
width: 49%;
margin: 0 0 2% 0;
height: 665px;
display: grid;

img {
grid-column: 1;
grid-row: 1;
height: 100%;
width: 100%;
z-index: 1;
align-content: center;
transition: 0.8s ease-out;
opacity: 1;
&:hover {
transition: 0.8s ease-in;
cursor: pointer;
opacity: 0.5;
}
}
.text__container {
border: 1px solid red;
text-align: center;
align-self: center;
grid-column: 1;
grid-row: 1;
background-color: rgba(0,0,0,0.5);
width: 100%;
height: 100%;
margin: 0;
z-index: 2;
background-color: transparent;
transition: 0.8s ease-out;
&:hover {
transition: 0.8s ease-in;
background-color: rgba(0,0,0,0.5);
}
.img__text {
border: 1px solid red;
text-align: center;
align-self: center;
z-index: 3;
color: #fff;
font-family: $main-font;
font-size: 2rem;
width: 50%;
margin: 0 auto;
transition: 0.8s ease-out;
opacity: 0;
}
}
}
}

<div class="gallery__container">
<div>
<img class="gallery__img" src="https://via.placeholder.com/100" alt="">
<div class="text__container">
<span class="img__text">Shake & Shot</span>
</div>
</div>
<div>
<img class="gallery__img" src="https://via.placeholder.com/100" alt="">
<div class="text__container">
<span class="img__text">It's On</span>
</div>
</div>
<div>
<img class="gallery__img" src="https://via.placeholder.com/100" alt="">
<div class="text__container">
<span class="img__text">It's On</span>
</div>
</div>
<div>
<img class="gallery__img" src="https://via.placeholder.com/100" alt="">
<div class="text__container">
<span class="img__text">It's On</span>
</div>
</div>
</div>