Join the Webstudio community

Updated 6 months ago

Padding transition on-hover not working πŸ€”

At a glance

The community member posted a question about why the link element in their website build doesn't have the "animated" padding-left change on hover. The comments suggest that the issue may be related to the transition properties not including padding, and that using the all keyword in the transition-property could be a solution. Another community member noted that the padding transition was added to the "postLink" token, and the local style for the link element seems to override that. The issue was resolved by removing the styles from the local link element.

Useful resources
Hi all, hope you're well.

I'd appreciate it if someone could take a look at this build https://davorfyi-zxy0b.wstd.io/blog and let me know why the <link> element – selected in the screenshot – doesn't have the "animated" padding-left change on hover.

Thanks in advance!
Attachment
CleanShot_2024-07-26_at_12.11.272x.png
B
O
D
6 comments
You don't have padding in transitions
transition-property: background-color,border-block-color;
Super weird! This is what I'm seeing:
Attachments
CleanShot_2024-07-26_at_12.47.222x.png
CleanShot_2024-07-26_at_12.46.502x.png
Yeah, that's the silver bullet πŸ˜‰ Thanks!
OK, crap... so the padding transition was added to the "postLink" token, and the local style for <link> seems to override that
Removing the styles from <link> local did the trick. Thanks so much for taking a look and helping out @TrySound and @Oleg Isonen ❀️
Add a reply
Sign up and join the conversation on Discord