Menu
I'm creating a link list where one link container expands when hovering it ( with details, image and description). I have no problems to animate it with css transitions or animations.
The problem is that I would like it to stay expanded even after the mouse moves away. And I would like to do it without javascript.
Is that possible? Thanks!
837
Triggering transitions You can trigger CSS transitions directly with pseudo classes like :hover (activates when the mouse goes over an element), :focus (activates when a user tabs onto an element, or when a user clicks into an input element), or :active (activates when user clicks on the element).
Hover animation is used to elevate or scale up a UI element when the user hovers on it.
The only way to truly pause an animation in CSS is to use the animation-play-state property with a paused value. In JavaScript, the property is “camelCased” as animationPlayState and set like this: element. style.
No it's not possible because every css that will be applied on mouseover ( :hover ) will be removed on mouseout and there is no other way to capture mouseover and out.
#animate:hover {
/* ex. -webkit- -moz- -ms- -o- */ animation: animation 2s infinite; /* will be directly aborted on mouseout :( */
}
So you should use JavaScript for that.
92
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
