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

Question

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

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

风格.scss

//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;

        }

      }

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++) {&nbsp; imgContainer[i].addEventListener('mouseover', function() {&nbsp; &nbsp; imgText[i].style.opacity = "1";&nbsp; &nbsp; imgText[i].style.transition = "0.8s ease-in";&nbsp; });&nbsp; imgContainer[i].addEventListener('mouseout', function(){&nbsp; &nbsp; imgText[i].style.opacity = "0";&nbsp; &nbsp; imgText[i].style.transition = "0.8s ease-out";&nbsp; });}.gallery__container {&nbsp; &nbsp; margin-top: 5%;&nbsp; &nbsp; display: flex;&nbsp; &nbsp; flex-direction: row;&nbsp; &nbsp; flex-wrap: wrap;&nbsp; &nbsp; justify-content: space-between;&nbsp; &nbsp; div {&nbsp; &nbsp; &nbsp; background-color: #000;&nbsp; &nbsp; &nbsp; width: 49%;&nbsp; &nbsp; &nbsp; margin: 0 0 2% 0;&nbsp; &nbsp; &nbsp; height: 665px;&nbsp; &nbsp; &nbsp; display: grid;&nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; img {&nbsp; &nbsp; &nbsp; &nbsp; grid-column: 1;&nbsp; &nbsp; &nbsp; &nbsp; grid-row: 1;&nbsp; &nbsp; &nbsp; &nbsp; height: 100%;&nbsp; &nbsp; &nbsp; &nbsp; width: 100%;&nbsp; &nbsp; &nbsp; &nbsp; z-index: 1;&nbsp; &nbsp; &nbsp; &nbsp; align-content: center;&nbsp; &nbsp; &nbsp; &nbsp; transition: 0.8s ease-out;&nbsp; &nbsp; &nbsp; &nbsp; opacity: 1;&nbsp; &nbsp; &nbsp; &nbsp; &:hover {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; transition: 0.8s ease-in;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; cursor: pointer;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; opacity: 0.5;&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; .text__container {&nbsp; &nbsp; &nbsp; &nbsp; border: 1px solid red;&nbsp; &nbsp; &nbsp; &nbsp; text-align: center;&nbsp; &nbsp; &nbsp; &nbsp; align-self: center;&nbsp; &nbsp; &nbsp; &nbsp; grid-column: 1;&nbsp; &nbsp; &nbsp; &nbsp; grid-row: 1;&nbsp; &nbsp; &nbsp; &nbsp; background-color: rgba(0,0,0,0.5);&nbsp; &nbsp; &nbsp; &nbsp; width: 100%;&nbsp; &nbsp; &nbsp; &nbsp; height: 100%;&nbsp; &nbsp; &nbsp; &nbsp; margin: 0;&nbsp; &nbsp; &nbsp; &nbsp; z-index: 2;&nbsp; &nbsp; &nbsp; &nbsp; background-color: transparent;&nbsp; &nbsp; &nbsp; &nbsp; transition: 0.8s ease-out;&nbsp; &nbsp; &nbsp; &nbsp; &:hover {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; transition: 0.8s ease-in;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; background-color: rgba(0,0,0,0.5);&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; .img__text {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; border: 1px solid red;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; text-align: center;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; align-self: center;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; z-index: 3;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; color: #fff;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; font-family: $main-font;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; font-size: 2rem;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; width: 50%;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; margin: 0 auto;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; transition: 0.8s ease-out;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; opacity: 0;&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; }&nbsp; }<div class="gallery__container">&nbsp; &nbsp; <div>&nbsp; &nbsp; &nbsp; <img class="gallery__img" src="https://via.placeholder.com/100" alt="">&nbsp; &nbsp; &nbsp; <div class="text__container">&nbsp; &nbsp; &nbsp; &nbsp; <span class="img__text">Shake & Shot</span>&nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; </div>&nbsp; &nbsp; <div>&nbsp; &nbsp; &nbsp; <img class="gallery__img" src="https://via.placeholder.com/100" alt="">&nbsp; &nbsp; &nbsp; <div class="text__container">&nbsp; &nbsp; &nbsp; &nbsp; <span class="img__text">It's On</span>&nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; </div>&nbsp; &nbsp; <div>&nbsp; &nbsp; &nbsp; <img class="gallery__img" src="https://via.placeholder.com/100" alt="">&nbsp; &nbsp; &nbsp; <div class="text__container">&nbsp; &nbsp; &nbsp; &nbsp; <span class="img__text">It's On</span>&nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; </div>&nbsp; &nbsp; <div>&nbsp; &nbsp; &nbsp; <img class="gallery__img" src="https://via.placeholder.com/100" alt="">&nbsp; &nbsp; &nbsp; <div class="text__container">&nbsp; &nbsp; &nbsp; &nbsp; <span class="img__text">It's On</span>&nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; </div>&nbsp; </div>