css - 改变“之前”的行为

Question

我正在尝试清理另一个开发人员并遇到以下 CSS 动画。我如何将其更改为单击而不是翻转？我不确定在这种情况下，在 CSS 中调用什么“悬停”来寻找替代方案。

   #subscription-dashboard:before {
        ...
    }

#subscription-dashboard:hover:before {
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    transform: rotate(-90deg);
          ...
}
        #subscription-dashboard:after {
    left: -80px;
    top: 145px;
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
              ...
}
#subscription-dashboard:hover:after {
    opacity: 0;
             ...
}

Answer 1

您所追求的短语是“伪类”

要处理点击，您可以更改:hover为:active，这将在单击鼠标按钮时触发。不幸的是，这并不能完全模拟单击，因为释放鼠标按钮将恢复为正常类；为此，您可以使用类似于：

transition-delay: 1000000s;

在其中一个班级推迟 - 很长一段时间 - 恢复到非:active班级。