question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Elements do not return to `:initial` after leaving the `:hovered` state

See original GitHub issue

I 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:open
  • Created a year ago
  • Reactions:2
  • Comments:5 (1 by maintainers)

github_iconTop GitHub Comments

1reaction
Tahulcommented, Sep 11, 2022

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!

0reactions
Developer27149commented, Sep 23, 2022

Nice

Read more comments on GitHub >

github_iconTop 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 >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found