css - 检测点击并在 CSS 上启动“功能”

Question

现在我有一个使按钮不可见的代码，并在 x 秒内显示它，我的想法是启动此计时器，当单击视频时，我不需要，如果他们停止视频，则计时器停止，但如果有可能做到这一点，那将是有帮助的。我可以给这个视频一个 ID 的名称和一个类的名称，我已经用按钮做到了，并命名为“按钮”。我已经拥有的代码：

body.page-id-2090 #button{
    visibility: hidden;
}

#button {
  animation: show 0s both;
  animation-delay: 30s;
}
@keyframes show {
  from {
    visibility: hidden;
  }
  to {
    visibility: visible;
  }
}

Answer 1

有几个例子可以尝试：

CSS 选择器：

1. #element_id：活动

例子：

.button {
  width: 50px;
  height: 20px;
  padding: 10px 20px;
  text-align: center;
  box-shadow: 1px 1px 1px #000;
  color: red;
}

.button:active {
  margin: 1px 1px 0;
  box-shadow: -1px -1px 1px #000;
  background-color: red;
  color: white;
}

#btnClick {
  display: block;
  visibility: hidden;
}

<input type="checkbox" id="btnClick" />
<label class="button" for="btnClick">Check onClick CSS effect</label>

2. #element_id:目标

例子：

#elementToShow {
  display: none;
  padding: 20px;
}

#elementToShow:target {
  display: block;
}

.element {
  color: red;
  font-size: 2rem;
}

<a href="#elementToShow">Click to show element by CSS selector</a>
<div class="element" id="elementToShow">Element visible!</div>