有没有办法让 ":hover" 停留？ [复制]答案

【问题标题】：Is there a way to make the ":hover" stay? [duplicate]有没有办法让 ":hover" 停留？ [复制]
【发布时间】：2020-01-10 17:59:42
【问题描述】：

有没有办法让:hover 评论即使在鼠标离开它之后仍然存在？

因此而无法工作的示例：

#SS {
  width: 300px;
  height: 300px;
  background-image: url(https://media1.tenor.com/images/a8479ab2587f60773c0032ada0c85d3b/tenor.gif?itemid=5751040);
  background-size: cover;
  margin: auto;
}

#SS:hover {
  transform: translate(500px);
}

#SS p {
  text-align: center;
  font-size: 140%;
  font-weight: bold;
  color: red;
  text-shadow: 0 0 5px black;
  padding-top: 265px;
}

<div id="SS">
  <p>You will never catch me!!!</p>
</div>

【问题讨论】：

你可以使用javascript吗？
我是新手，所以我首先开始学习html和css，但我很想看到js的答案，因为我想在我完成css后立即学习它
仅使用 css 是可能的，但取决于用户案例，您可以在这里找到答案：stackoverflow.com/questions/17100235/…

标签： html css

【解决方案1】：

这是一种使用 JS 的方法，我建议使用这个：

var ss = document.getElementById('SS');

ss.addEventListener('mouseover', function() {
  //ss.classList.add('SS-hover');
  ss.classList.toggle('SS-hover');
})

#SS {
  width: 300px;
  height: 300px;
  background-image: url(https://media1.tenor.com/images/a8479ab2587f60773c0032ada0c85d3b/tenor.gif?itemid=5751040);
  background-size: cover;
  margin: auto;
}

.SS-hover {
  transform: translate(500px);
}

#SS p {
  text-align: center;
  font-size: 140%;
  font-weight: bold;
  color: red;
  text-shadow: 0 0 5px black;
  padding-top: 265px;
}

<div id="SS">
  <p>You will never catch me!!!</p>
</div>

【讨论】：

有没有办法让它回去，所以每次你试图触摸它都会从你身边跑掉？
您可以使用classList.toggle，更新答案中的代码

【解决方案2】：

您可以通过多种方式实现这一目标。例如： //HTML

  <div id="SS" onmouseover="translateSS(this)">
      <p>You will never catch me!!!</p>
  </div>

//JS

 function translateSS(x) {
            x.style.transform = "translate(500px)";
            }

【讨论】：