无法延长CSS中:active伪类的持续时长，求助解决方法

嘿，我来帮你搞定这个:active伪类持续时长的问题！你之前尝试用transition延迟的思路其实走进了一个小误区，我来给你拆解清楚，再给你可行的解决方案。

为什么你的代码没生效？ #

你给li设置了transition:0s 1s，又给li:active:before设置了transition:0s，但问题的核心在于：:active伪类只在用户按住鼠标的期间生效，一旦你松开鼠标，:active状态立刻消失，对应的伪元素也会直接被移除——这时候transition的延迟根本没机会发挥作用，因为没有属性变化的过程可以等待。

解决方案1：纯CSS动画（Animation） #

用CSS动画可以让:active触发后，伪元素保持显示直到动画结束，即使你已经松开鼠标。代码如下：

/* 定义动画，让伪元素在整个动画周期内保持显示状态 */
@keyframes showActiveTip {
  0%, 100% {
    content: "hello !";
    z-index: 99999999;
    position: fixed;
    bottom: 0;
    width: 100%;
    background: black;
    text-align: center;
    color: white;
    padding: 10px 0;
  }
}

li:active:before {
  /* 调用动画，设置时长为1秒，forwards让动画结束后保持最后一帧状态 */
  animation: showActiveTip 1s forwards;
}

你可以把1s改成你想要的任何时长（比如2s就是2秒），这样点击li后，提示会持续显示设定的时长，之后才消失。

解决方案2：JavaScript辅助（更灵活可控） #

如果需要更灵活的控制（比如根据不同场景调整时长、处理长按等），可以结合JS给元素添加/移除类的方式：

CSS部分 #

/* 把原来:active:before的样式放到.active类里 */
li.active:before {
  content: "hello !";
  z-index: 99999999;
  position: fixed;
  bottom: 0;
  width: 100%;
  background: black;
  text-align: center;
  color: white;
  padding: 10px 0;
}

JavaScript部分 #

const targetLi = document.querySelector('li');

// 鼠标按下时添加active类，延迟指定时长后移除
targetLi.addEventListener('mousedown', () => {
  targetLi.classList.add('active');
  setTimeout(() => {
    targetLi.classList.remove('active');
  }, 1000); // 这里的1000是毫秒数，对应1秒，可自行修改
});

// 处理鼠标提前松开的情况，确保提示仍能持续设定时长
targetLi.addEventListener('mouseup', () => {
  setTimeout(() => {
    targetLi.classList.remove('active');
  }, 1000);
});

这种方法的好处是可以随时通过JS调整时长，甚至根据用户行为动态改变，适用性更广。

内容的提问来源于stack exchange，提问作者user8342070