javascript - 用指针悬停时如何让文本显示在所有卡片中
问题描述
我试图让所有三张卡片在用鼠标指针悬停在它们上方时显示文本,但是它只显示左侧第一张卡片中的文本,而不显示其他两张卡片中的文本,即使我已经放置了 lorem ipsom所有 3 个 div 中的文本,用于不会显示的卡片。
我已经在网上寻找解决方案,但找不到任何接近解决它的方法。看来我可能必须添加一个 JavaScript 循环来遍历它,但我无法弄清楚我该如何做到这一点。
HTML
<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>
CSS
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;
}
Javascript
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";
}
解决方案
我删除了IDs
iehidden
并添加了它们classes
,如下所示
JSFIDDLE片段。
推荐阅读
- php - 无法使用 laravel eloquent 获取数据
- mysql - 用于存储年龄组范围的 Mysql 表
- vb.net-2010 - 嵌套循环问题
- python - 如何确保 venv 的状态等于 requirements.txt 中声明的状态?
- python - 如何更有效地创建数字增加的整数?
- sql - 在非主键字段上对现有表进行分区
- sql - 为什么我的存储过程在手动执行时工作正常,但从另一个 SP 调用时却不行?
- node.js - NodeJS 在 then() 之后执行下一个进程
- sql - 在 Ionic 4 中返回行 COUNT
- javascript - setInterval 在第一次 Node 后无法正常工作