检测点击并在 CSS 上启动“功能”答案

【问题标题】：Detect a clik and start a "function" on CSS检测点击并在 CSS 上启动“功能”
【发布时间】：2021-01-29 13:52:05
【问题描述】：

现在我有一个使按钮不可见的代码，并在 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;
  }
}

【问题讨论】：

请提供一个工作示例

标签： css animation button click elementor

【解决方案1】：

有几个例子可以尝试：

CSS 选择器：

```
#element_id:active
```

示例：

.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>

```
#element_id:target
```

示例：

#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>

【讨论】：

这并没有解决我的问题，我想有一个功能来检测视频何时播放或停止，并根据这些信息启动和暂停计时器，我一直在搜索，它可能很复杂，因为您需要知道视频何时被按下或未被按下，但无论如何谢谢。
那么在这种情况下它连接到 JS/DOM 事件，为什么不通过 vanilla JS 快速解决呢？有没有禁止申请JS的情况？
我可以试试 JS，我不知道它是否有效，但我可以试试。
即使使用 Vanilla JS 也更容易做到，但如果你可以使用 jQuery，$ 选择器会更快