javascript - 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;
}