CSS :active 应该变成“inactive”在特定时间之后

Question

对于移动设备，我使用 :hover :active 在选项卡（单击）上创建过渡效果，增加元素的大小以提供更多信息。我希望激活的元素在一段时间过后再次变为“非活动”。我找不到类似的问题。

编辑：问题似乎是该元素现在永久“悬停”，我希望该元素在几秒钟后不悬停

edit2：http://jsfiddle.net/qw8vyrxd/

.box {
width: 40px;
height: 40px;
background-color: red;
}

@media screen and (max-width: 1000px){
.box:hover, .box:active{
width: 60px;
height: 60px;
}
}

在移动设备上，红色方块将在点击时展开（触发悬停选择器），但永远不会缩回，除非页面重新加载，我想要悬停效果仅持​​续几秒钟。

此致

Answer 1

触摸屏上元素上保留的状态是 :hover （在我的情况下），而不是 :active。触摸屏保持 :hover 状态，直到您单击其他位置。

因此，我通过仅将 :hover 应用于支持它的设备（使用媒体查询悬停：hover）并保留 :active 而不使用媒体来解决此问题查询。在触摸屏上，只要用户将手指放在元素上，:active 状态就会处于活动状态。

.box {
  width: 40px;
  height: 40px;
  background-color: red;
}

.box:active {
  width: 60px;
  height: 60px;
}

@media (hover: hover) {
  .box:hover {
    width: 60px;
    height: 60px;
  }
}

<div class="box"></div>

这在我的设备上解决了这个问题。我必须使用真实设备，因为即使通过模拟触摸，DevTools 仍然表现得像鼠标。

---

延迟版本

由于伪状态很难用 JS 控制，所以我想只使用 CSS。我使用了一些walkaround-hack。我将 transition 设置为 0s，然后将 transition-delay 设置为 2s。然后我为支持悬停的设备重载/禁用它。

这意味着它在触摸屏上显示更大 2 秒。

.box {
  width: 40px;
  height: 40px;
  background-color: red;
  transition: 0s height, 0s width;
  transition-delay: 2s;
}

.box:active {
  width: 60px;
  height: 60px;
  transition-delay: 0s;
}

@media (hover: hover) {
  .box {
    transition-delay: 0s;
  }
  .box:hover {
    width: 60px;
    height: 60px;
    transition-delay: 0s;
  }
}

<div class="box"></div>