时间戳

首页 > 解决方案 > 有没有办法让 ":hover" 停留？

html - 有没有办法让 ":hover" 停留？

问题描述

有没有办法让: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>

标签： htmlcss

解决方案

这是一种使用 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>

推荐阅读