This is a read-only archive of the Framer Community on Facebook.

What is Framer? Join the Community
Return to index
Parsa Kamali
Posted Apr 11 - Read on Facebook

framer friends:

annoyingly cant make something seemingly simple happen, looking for some help. i have a list of rows that i want to highlight when hovered over and then retain it's background color when clicked, a "clicked state." whenever i code the "click" onto the row though, the "mouse out" automatically changes the state again so the selected state never persists.

have tried "if" statements that only run if the hover interactions if the state is default but it seems like it is never detecting the correct state so those statements never work. not sure if it's me or something with the states. is there another technique to achieve this? seems like it should be easy! image attached of the states.

THANKS

5 Comments

Hannes Waller

do you have to have states for the hover animation? if not, maybe this: http://share.framerjs.com/37l0zdzoffvw/

Parsa Kamali

hm. this seems to have the same issue where on "mouseleave" it changes the color back to the deselected state, so it doesnt persist....

Hannes Waller

ah, well that's because I misunderstood what you meant :) you want to change the background color on hover, persist it on click and if not clicked, go back to the first backgroundcolor when mouse leaves. is that it?

JL Flores Mena

Hey Parsa, you may want to add a conditional inside the 'mouseleave' function. Right now you're always changing the state to default. You shouldn't do it for the selected ones. That means something like:
if this.states.current isnt "selected"
this.states.switch "default"
(lost the identation there, but the second line is inside the if)

Parsa Kamali

JL Flores Mena yesssss that's the answer. never thought to put it inside the mouseleave. THANK YOU!

Read the entire post on Facebook