使css：悬停样式不会消失[重复]答案

【问题标题】：Make css :hover style not go away [duplicate]使css：悬停样式不会消失[重复]
【发布时间】：2021-10-16 03:11:55
【问题描述】：

所以我正在寻找一种方法来在单击元素时引入一些新的 CSS，然后再保留它。这真的是我无法工作的最后一部分。

到目前为止，这是我的代码：

HTML

<body>
    <p>Click me</p>
</body>

CSS

#elmt:active{
   background-color: lightgreen;
}

所以我希望背景颜色在您第一次单击#elmt 时保持浅绿色，并且在您松开鼠标时不返回默认颜色。

这可能吗？

【问题讨论】：

不能单独使用 css，您需要使用 javascript 添加/删除类

标签： css

【解决方案1】：

您可以使用一些 javascript 在单击时轻松切换 css 类：

document.body.addEventListener('click', 
  (e) => e.target.classList.toggle('active')
);

.active {
  background: lightgreen;
}

<p>Click me</p>
<p>Or me</p>

正如Stephen P 在a comment below 中指出的那样，您需要更有选择性地选择要定位的元素——在上面的sn-p 中，如果您在段落之间单击，您可以切换body 的背景，例如——但这只是概念的快速证明。

【讨论】：

这绝对是我会使用的策略，但是，Tobias，请注意，一旦您开始嵌套元素，事情就会变得更加复杂。尝试使用列表<ul><li>1</li><li>2</li><li>3</li></ul>，您会发现您可以切换单个li 元素，但您也可以切换ul 本身。

【解决方案2】：

你不能只用 css 做到这一点

//get your element 
document.getElementById("#elmt").addEventListener("click", (e)>{
// get the other element 
document.getElementById("#theOtherName").style.backgroundColor = "lightgreen";
})

【讨论】：

【解决方案3】：

如果你的元素不是可聚焦元素，你需要添加tabindex属性，这样它才能捕捉到点击事件，并被点击、聚焦和激活。

点击部分解决后，您可以在常规状态上添加生命周期的转换延迟，因此看起来风格仍然存在。

示例（重复：Make CSS Hover state remain after "unhovering"）：

p[tabindex] {
  transition-duration: 0;
  transition-delay: 99999s;
}

p[tabindex]:active {
  transition-delay: 0s;
  background-color: lightgreen;
}

&lt;p tabindex="0"&gt;Click me&lt;/p&gt;

【讨论】：