Better to add CSS timed transition to link selector (a) or to the hover state (a:hover)?


When using the CSS transitions for creating rollovers that fade in/out, is it better to place it under the a selector or the a:hover selector?

My instinct is to place it on the a:hover selector because that’s the active portion of the rollover but looking at examples, people seem to declare them after the a instead.

Both seem to work perfectly but I’d really like to know which is considered “correct”, and if possible, why.

So, this:

a { color:blue; transition:.5s; }

a:hover { color:red; }

Or this (my instinct):

a { color:blue; }

a:hover { color:red; transition:.5s; }


(Vendor prefixes intentionally omitted)

Problem courtesy of: StephenESC


It depends on your needs, using the transition property below in a

a { color:blue; transition:.5s; }

Will transit the element when you mouseover/hover the element, as well as when you mouseout

Where this

a:hover { color:red; transition:.5s; }

Will transit the element only on hover, it will get back to normal the moment you take out the mouse.

Demo (Too and fro transition)

Demo 2 (Will transit only on hover and will be back to normal once the mouse is off the element)

Note: I've increased the transition time to show how it actually matters.

Conclusion: Generally speaking, transition shouldn't be used on :hover as it won't transit when the mouse is taken out of the element. But as I said again, it depends on the needs.

Solution courtesy of: Mr. Alien


There is currently no discussion for this recipe.

This recipe can be found in it's original form on Stack Over Flow.