Change padding on hover interactions is it posible for another element, not for hovered?

Design help Animations & Interactions
1

hi, is it possible without show/hidding the objects?

Thanks!

Here is my public share link: LINK
(how to access public share link)

2

It is possible, yes.

3

Aaron beat me to it :slightly_smiling_face:

Just give the element a class, then select the ‘States’ - choose hover - change padding.

Switch back to normal state and test it out!

No need to go into the actual ‘Interactions’ panel unless you need to get really detailed.

1 Like
4

ok, sorry, is it possible to do for another element? not fo hovering elements.

5

Do you mean hover on one element, and it affects a different one?

6

Yes, i have a text element and some child text in it. And a want to change padding on child text element, when i hover mouse on the parent text element.

7

Hi @jmilo

I’m pretty sure it’s not possible from the list of native options, so you may need to look at a workaround with scaling and movement of the child element…when you hover the parent.

Anything spring to mind @vincent @nita ?

8

You can’t, per se, affect the padding of another element. But you can affect its size. So if you have 2 nested divs of the same size, changing the dimensions of the one inside the other is like changing the padding of the outer one.

9

ok, thanks. Is it posible to change status (like hofer, focus etc…) more smoothly without interactions? Use transitions or some one else?

Thanks for helping

10

Yep, you can use transitions for the ‘states’ in the styles panel. Add a transform, and then decide the transition to apply.

That is only for the actual element though, so you need to delve into interactions if you want to affect another element. :slightly_smiling_face:

11

it is work, thanks!11