Help: How to: Flip element on hover, keep end state, then reverse on next hover
What the title says βοΈ
I have tried to make a pen, I don't understand why it does not work: https://codepen.io/ingvild/pen/OJKyzBy
I think this is a pretty "fair" request, and it should be easier to solve in CSS, so anyone wants to contribute?
I want to solve this only using CSS.
I have tried a variety of alternatives, no one leading to success π
I added a video showing how on hover I don't want the icon to flip back when I unhover, but to stay in the flipped position, then on next hover, flip back to it's original state.
Desired behavior:
1. Hover: scaleX β‘οΈ -1
2. Unhovers: Keeps scaleX -1
3. Hovers 2nd time: scaleX β‘οΈ 1
4. Unhovers: Keeps scaleX 1
5. Repeat from 1.
8 Replies
Iβm pretty sure that you wonβt be able to do that with CSS alone.
yeah, I'm pretty sure you'd have to track state somehow, and I don't think you can do that in CSS
Ah, nice to know so I can stop my fruitless attempts π
Thanks!
I did have a go with @property but, as Jochem says, you need to track the state.
If it were on click you could use a checkbox but on hover I can't think of any way to do it.
Me too, tried @property, thinking that would help me both with 1) giving it an initial state and 2) allowing animation of the prop, but yeah, no success so far π Thanks for making a go at it π
this isnt possible with pure css
i tried this as well
css variables work like css properties and not like variables in other languages
once the hover reverts the css variable is no longer being set
what is possible to do is to swap the button
https://medium.com/@alexc73/state-in-css-ac57a1ebde09
Ah, thanks! π I only have the possibility to change the CSS, not add an extra element as the tutorial shows, but then I know an alternative at least π
you're welcome.