css - 单击时重置悬停选择器

Question

我有这个类在悬停 1.5 秒后显示工具提示的响应。

&:hover .tooltip {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
    transition-delay: 1.5s;
}

我在按钮上使用这个类。 我希望当用户单击此按钮时，转换延迟将从头开始计数 - 意味着工具提示将仅在 1.5 秒后再次显示。

最好的方法是什么？

Answer 1

您也可以使用:active 伪类：

&:hover .tooltip,
&:active .tooltip {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
    transition-delay: 1.5s;
}