Ability to change an element's styles using Interactions

Community resources Product feedback
1

I am trying to change the color of a div (and the text inside) on click, but cannot! Is this feature being made? If not, if there a way to achieve the same effect another way?

Thanks.

1 Like
2

You would do style changes using the states (Pressed) option combined with interactions.

3

Pressed just changes it as long as I am holding down the click. I want it to stay that way after I release the mouse. What do you mean “combined with other interactions?”

4

Your title asks how you can change styles using interactions. I meant that you can’t use interactions to change styles but combining state changes with interactions would work for style changes on click.

EDIT: It would be awesome to have full control over everything using interactions.

5

Thanks Darian. I still don’t know how to combine state changes with interactions. Can you walk me through this by any chance?

6

You’ll have to trick it a bit. Add elements of the color you want, hide them, and make them appear with interaction.

7

Vincent do you mean elements or styles? If you mean elements, then I would have to have 2 identical elements (divs in my case) overlap each other perfectly, which I can’t figure out how to do. If you mean styles, these cannot be selected upon in an interaction. It only allows you to select elements. It sounds like Darian thinks that perhaps state changes can be selected in interactions, but I can’t do that either.

8

Yes, overlapping elements.

Here’s a crash course on how to make two divs overlapping themselves inside another one.

  • Create the first div. Give it a class name, set it to position:relative (this makes no visual change but is necessary for the following steps), set its dimensions to, say, 300 px x 300 px.
  • Drag one div in, give it a class name, set its dimensions 100% x 100% so it fills its parent div.
  • Drag another div in the first one (as a sibling to the second one), give it a class name, set dimensions to 100% x 100%, set it to position:absolute.

The three divs should now be on top of each others, the two last one being siblings. We set the parent div to :relative for it to be the reference for the :absolute one (absolute elements are placed regarding their closest POSITIONED parent, it’s a CSS rule).

9

Thanks Vincent! This is great to know and will help out immensely in the future (like when I want to replace pictures on click)

I thought I would share another solution to my problem that I just figured out before I read your response. I simply put all of my divs inside a parent div, made the parent div a dark color, and set an interaction for each inside div (which all have a white background) to change to 80% transparency on click. This seems to do the trick!

Cheers and thanks again for the help.

10

Great (:

Always remember the positioning trick. It’s not a trick but an essential CSS rule that isn’t very well mastered by themers even today. Along with the z-index rule: z-index works for siblings elements.

Weblow is a greater tool than most people think it is. Because of what we just did: it allows anyone to design, but as it sticks to HTML and CSS grounds, it allows the ones who are savvy to go further away, and others to improve. There is a gentle learning curve that makes it evolutive. I keep being surprised by it.

Alice in the future don’t hesitate to share your public link, it’s easier to help you this way.

Learn how to do it here: Share a read-only link | Webflow University

11

I second that - full control over styling using interactions would be awesome!

1 Like
12

Looking forward to the same.

Trying to change an element’s class on click. (Adding or removing a class).
Or, set the actual styling value on click. (Setting the color value itself).

2 Likes
13

Maybe we can move this to the Wishlist?

1 Like
14

I think it’s already in it (:
I think it’s already in it (:

15

@vincent Do you know if there is already a request for a feature that can allow us to apply differents interactions for differents viewport?

Thanks

16

I don’t know, no.

But you already can, sort of… create 2 identical elements, set each to appear on desired devices, add your interactions to each… voilà. A bit more messy and heavy than what you’re requesting, but it works.