Is there a way to specify a CSS3 transition to occur only on :hover and when returning from hover, not on every event? [closed]
- by Steve
You could define the transition on the :hover event, which causes the browser to render only the effect into the hover and not out of it.
a:hover {
transition...
}
Using scale as an example, an image being scaled up would scale up on hover, but go straight back down without any transition when the cursor leaves the image.
Or, you can set the transition on the element directly:
a {
transition...
}
Which by definition means any change that effects the scale of the element such as any developer set styles will work, but also the user zooming in and out the page, will cause there to be a transition.
All the tutorials being spewed onto the internet at the moment point to using the latter, but wouldn't one consider this a usability flaw for anyone wanting to resize the page or taking any other action that may cause similar scenarios?
Pages with large amounts of transitional hover scaling can go pretty mental if you zoom in and out of them.
