5

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!

Improve this question
4
  • I can only think of applying the transition to 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?
    – BoltClock
    Commented Aug 28, 2013 at 9:21
  • Yes, that's the solution. After the :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
    – Cohars
    Commented Aug 28, 2013 at 9:31
  • The problem is that it animates back to :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.
    – BoltClock
    Commented Aug 28, 2013 at 9:33
  • Actually I don't really care about the transition (immediate or not) from :active to :hover. But I must admit that having a transition effect is pretty nice, so @kougiland 's solution fits perfectly!
    – Cohars
    Commented Aug 28, 2013 at 9:46

1 Answer 1

Reset to default
4 
a {
    background-color: white;
    transition: all 1s;
}

a:hover {
    background-color: grey;
}

a:active {
    background-color: black;
    transition: none;
}

markup:

<menu type=list>
    <li><a>home</a></li>
    <li><a>work</a></li>
    <li><a>contact</a></li>
    <li><a>about</a></li>
</menu>

demo: http://jsfiddle.net/7nwLF/

Improve this answer
3
  • Those !importants aren't needed.
    – BoltClock
    Commented Aug 28, 2013 at 9:25
  • true but it s just for security reasons
    – Gildas.Tambo
    Commented Aug 28, 2013 at 9:26
  • Well, that was pretty simple. Thank you very much! That allows the transition from :active to :hoverstates, which makes a nice effect!
    – Cohars
    Commented Aug 28, 2013 at 9:42

Not the answer you're looking for? Browse other questions tagged or ask your own question.