I'm not sure if it's possible, but here is what I did:
a {
background-color: white;
transition: all 1s;
}
a:hover {
background-color: grey;
}
a:active {
background-color: black;
}
But I would like the transitions not to apply on the :active (just on the :hover), I tried this:
a {
background-color: white;
}
a:hover {
background-color: grey;
transition: all 1s;
}
a:active {
background-color: black;
}
And the result is exactly the same (except that the effect is not reversed). Is it possible to do it in full CSS.
Thanks!
a:not(:active)
, but then what should happen when the element transitions from:active
to:hover
after you release the mouse while still hovering the element?:active
it simply goes back to the:hover
state (immediately). But that's what we want with the:active
, just to see the click event. Thanks:hover
instead of changing immediately, because the transition is defined for:hover
(remember that we're talking about states, not events, in CSS). If that doesn't matter to you though, then I will post an answer.:active
to:hover
. But I must admit that having a transition effect is pretty nice, so @kougiland 's solution fits perfectly!