Elements do not return to `:initial` after leaving the `:hovered` state
See original GitHub issueI am wondering if this is intentional or an oversight. With most reactive animation libraries, I typically expect a transition to be reversed when a hovered state is left. Currently, elements respect the :hovered
transition, but when the mouse leaves the element, the :initial
variant is not re-applied. It would be great if it were, otherwise everything is left “stuck” in the hovered state. This makes it difficult to implement any user-interactive animations. Otherwise, the library looks great
Issue Analytics
- State:
- Created a year ago
- Reactions:2
- Comments:5 (1 by maintainers)
Top Results From Across the Web
Make CSS Hover state remain after "unhovering"
The problem is that anything you change with the :hover pseudo-class selector will not (and/or should not) match elements over which you are...
Read more >Different Transitions for Hover On / Hover Off - CSS-Tricks
When you hover over, the :hover transition overrides the transition set in the regular state, and that property animates. When you hover off, ......
Read more >.hover() | jQuery API Documentation
A function to execute when the mouse pointer leaves the element. The .hover() method binds handlers for both mouseenter and mouseleave events. You...
Read more >An Interactive Guide to CSS Transitions - Josh W Comeau
This comprehensive guide shows how to use CSS transitions! A back-to-basics look at the fundamental building blocks we need to create ...
Read more >transition - CSS: Cascading Style Sheets - MDN Web Docs
Transitions enable you to define the transition between two states of an element. Different states may be defined using pseudo-classes like : ...
Read more >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
Hey, I would need a reproduction for this!
Also, I am really sorry for the late answer.
Here is a link to a sandbox to help: https://stackblitz.com/edit/vue-zj2zpq?file=src%2FApp.vue
You can modify it to your will and showcase what is the exact issue!
Nice