我可以在点击而不是悬停时使用翻转卡吗

Question

我对CSS有点陌生，有人要求我修改一些现有的翻转卡，使其在点击时翻转，而不是悬停。这是代码。

.flip-card {
background-color: transparent;
width: 300px;
/*increase the card width and height by 20px*/
height: 300px;
perspective: 600px;
}
.flip-card-inner {
position: relative;
width: 100%;
height: 100%;
text-align: center;
transition: transform 0.6s;
transform-style: preserve-3d;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
}
.flip-card:hover .flip-card-inner {
transform: rotateY(180deg);
}

.flip-card-front,
.flip-card-back {
position: absolute;
width: 100%;
height: 100%;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.flip-card-front {
background-color: #ffca33;
color: black;
}
.flip-card-back {
background-color: #2980b9;
color: white;
transform: rotateY(180deg);
}

我以为我可以通过将.flip-card:hover更改为.flip-card:active来实现这一点，但这似乎只有在我按下鼠标按钮并在松开后立即翻转的情况下才有效。我试了很多.flip-card:active.flip-card:hover，结果都一样。

Answer 1

很遗憾，没有。您无法使用CSS跟踪点击事件。如果您想要点击事件，请使用JavaScript。

document.getElementsByClassName("flip-card-front")[0]
.onclick = function(){
this.classList.toggle("active")
}

请注意，此表格仅在第一张卡片上生效。如果你想要更多，你需要某种循环，甚至在整个屏幕上设置一个onclick事件，并检查目标是否匹配一张翻转卡。