Javascript 将鼠标悬停在图像上可添加效果，再次悬停可使其消失

我展示了一些图片。首先，它们都是黑灰色的，我想添加一些效果，这样当你将鼠标悬停在一个图像上时，它的灰度将变为0，并保持为0，直到我再次将鼠标悬停在该图像上

我看到一些人使用javascript添加类，但我不知道如何在第一次悬停后100%恢复到灰度

 <div id="photos">
      <div class="images">
        <img src="/photographs/clouds.jpg" />
      </div>

      <div class="images">
        <img src="/photographs/DogPrint.jpg" />
      </div>

      <div class="images">
        <img src="/photographs/euro.jpg" />
      </div>

      <div class="images">
        <img src="/photographs/FireHead.jpg" />
      </div>

      <div class="images">
        <img src="/photographs/wasabi.jpg" />
      </div>

      <div class="images">
        <img src="/photographs/sam.jpg" />
      </div>

      <div class="images">
        <img src="/photographs/roli.jpg" />
      </div>
    </div>

---

我只是添加了一点Javascript使其工作，甚至是一个转换。

JSFiddle-

HTML-

    <div id="photos">
      <div class="images">
        <img src="/photographs/clouds.jpg" />
                <div>
                Text
                </div>
      </div>

      <div class="images">
        <img src="/photographs/DogPrint.jpg" />
                <div>
                Text
                </div>
      </div>

      <div class="images">
        <img src="/photographs/euro.jpg" />
                <div>
                Text
                </div>
      </div>

      <div class="images">
        <img src="/photographs/FireHead.jpg" />
                <div>
                Text
                </div>
      </div>

      <div class="images">
        <img src="/photographs/wasabi.jpg" />
                <div>
                Text
                </div>
      </div>

      <div class="images">
        <img src="/photographs/sam.jpg" />
                <div>
                Text
                </div>
      </div>

      <div class="images">
        <img src="/photographs/roli.jpg" />
                <div>
                Text
                </div>
      </div>
</div>

---

您可以在每个图像元素上附加“mouseover”事件侦听器。
触发此事件时，您可以使用

元素.classList.toggle（'className'）

添加或删除类名

const imgs=document.getElementsByClassName（“灰度图像”）；
对于（让我输入imgs）{
恒流img=imgs[i]；
currentImg.addEventListener（“鼠标悬停”，e=>{
currentImg.classList.toggle（“图像颜色”）；
});
}

img{
宽度：100%；
滤镜：灰度（100%）；
边界半径：2px；
过渡：所有0.25秒缓进缓出；
}
#照片{
色谱柱：5200px；
柱间距：1.5雷姆；
宽度：90%；
利润上限：200px；
}
.图像颜色{
滤镜：灰度（0%）；
}

如果我修改了每个div，在img下面添加了额外的div，并添加了文本，我想使其灰度和不透明度从0变为1，然后再变回。我可以使用你的JS代码分别为灰度和不透明。我如何将它们连接在一起？只是为了澄清一下，你希望文本消失，图像在悬停时100%灰度，对吗？是的，但图像最初是100%灰度，文本是隐藏的。我只在语句中将灰度更改为0%时才起作用

    <div id="photos">
      <div class="images">
        <img src="/photographs/clouds.jpg" />
                <div>
                Text
                </div>
      </div>

      <div class="images">
        <img src="/photographs/DogPrint.jpg" />
                <div>
                Text
                </div>
      </div>

      <div class="images">
        <img src="/photographs/euro.jpg" />
                <div>
                Text
                </div>
      </div>

      <div class="images">
        <img src="/photographs/FireHead.jpg" />
                <div>
                Text
                </div>
      </div>

      <div class="images">
        <img src="/photographs/wasabi.jpg" />
                <div>
                Text
                </div>
      </div>

      <div class="images">
        <img src="/photographs/sam.jpg" />
                <div>
                Text
                </div>
      </div>

      <div class="images">
        <img src="/photographs/roli.jpg" />
                <div>
                Text
                </div>
      </div>
</div>

    var images = document.querySelectorAll('#photos > .images > img')
for (var i = 0; i < images.length; i ++) {
    images[i].style.transitionDuration = '0.1s'
    images[i].nextElementSibling.style.transitionDuration = '0.1s'
    images[i].nextElementSibling.style.opacity = '0'
    images[i].addEventListener('mouseenter', function() {
        if (this.style.filter === "grayscale(100%)") {
        this.style.filter = "grayscale(0%)";
            this.nextElementSibling.style.opacity = "0";
    } else {
        this.style.filter = "grayscale(100%)";
            this.nextElementSibling.style.opacity = "1";
    }

    })
}

img {
  width: 100%;
  filter: grayscale(100%);
  border-radius: 2px;
  transition: all 0.25s ease-in-out;
}

#photos {
  columns: 5 200px;
  column-gap: 1.5rem;
  width: 90%;
  margin-top: 200px;
  margin-left: 200px;
}