[英]how can i get text to show in all cards when hovering over with pointer
I am trying to get all three cards to reveal text when hovering over them with the mouse pointer, however it only shows the text in the first card on the left but not in the other two cards, even when I have already put the lorem ipsom text in all 3 div's for the cards it will not show. 我试图用鼠标指针悬停在所有三张卡上以显示文本,但是即使我已经放置了lorem ipsom,它也只在左侧的第一张卡上显示了文本,而在其他两张卡上却未显示卡中所有3个div中的文本将不会显示。
I have looked for solutions online but cant find any thing close to solving it. 我已经在网上寻找解决方案,但找不到任何解决方案。 It appears that I may have to add a JavaScript loop to iterate through it, but I cant figure out how I could do this.
看来我可能必须添加一个JavaScript循环才能对其进行迭代,但是我无法弄清楚该如何做。
<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";
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.