CODEWITHSUNDEEP
javascriptcsscss-selectorscss-transitions
Lior Kooznits
Lior Kooznits

Reputation: 743

css - reset hover selector on click

I have this class the response of displaying tooltip after 1.5s hover.

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

I'm using this class on a button. I would like that when user clicking on this button, the transition-delay will start count from the beginning - means the tooltip will be displayed only after 1.5s again.

what't the best approach doing it?

Upvotes: 2

Views: 594

Answers (1)

andreas
andreas

Reputation: 16946

You can use the :active pseudo-class too:

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

Upvotes: 2

Related Questions