Javascript 当用指针悬停在所有卡片上时，如何获取文本以显示

我试图让所有三张牌在鼠标指针悬停在上面时显示文本，但是它只显示左侧第一张牌中的文本，而不显示其他两张牌中的文本，即使我已经将lorem ipsom文本放在所有3个div中，但它不会显示

我在网上寻找解决方案，但找不到任何接近解决方案的东西。看起来我可能需要添加一个JavaScript循环来遍历它，但我不知道如何才能做到这一点

HTML Javascript

---

我删除了

id

即

隐藏

，并将它们添加为下面的

类

---

代码段。

您的ID必须是唯一的。改为使用

class=“hidden”

和

var text=document.getElementsByClassName（“hidden”）更好的是，根本不使用ID。这是一个只使用css的项目，ID是30只冷冻火鸡（对于50只野兽，请参见！重要信息）。
<div class="wrapper">
  <div class="card" id='card'>
    <div class="orangeCover">
      <p id="hidden" class='easein'>Lorem ipsum dolor sit amet, 
        consectetur adipisicing elit. Ipsa, eaque.
      </p>
    </div>
  </div>
  <div class="card" id='card'>
    <div class="orangeCover">
      <p id="hidden" class='easein'>Lorem ipsum dolor sit amet, 
        consectetur adipisicing elit. Ipsa, eaque.
      </p>
    </div>
  </div>
  <div class="card" id='card'>
    <div class="orangeCover">
      <p id="hidden" class='easein'>Lorem ipsum dolor sit amet, 
        consectetur adipisicing elit. Ipsa, eaque.
      </p>
    </div>
  </div>
</div>

    html,
    body {
      margin: 0;
    }

.wrapper {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  display: grid;
  grid-column-gap: 20px;
  grid-row-gap: 20px;
  grid-template-columns: auto auto auto auto;
}

.orangeCover {
  width: 250px;
  height: 250px;
  position: absolute;
}

.orangeCover:hover {
  background-color: orangered;
  transition: ease-in 0.5s;
}

.card {
  border: 2px orangered solid;
  width: 250px;
  height: 250px;
  margin-left: 100px;
  margin-top: 100px;
  background-image: url("http://source.unsplash.com/random/250x250");
}

#hidden {
  visibility: hidden;
}

.reveal {
  margin-left: 20px;
  color: white;
  font-size: 1.5rem;
}

let text = document.querySelector("#hidden"), i;
let overlay = document.querySelector(".card");
let hiddenOverlay = document.querySelector(".card");

overlay.addEventListener("mouseover", newOverlay);
hiddenOverlay.addEventListener("mouseleave", hidden);

function newOverlay() {
  text.style.visibility = "visible";
  text.className = "reveal";
}

function hidden() {
  text.style.visibility = "hidden";
}