css - 更改 "before"行为

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 类。