Are Interactions Global in Nature?

This may seem like a dumb question.

Create 2 DIV’s…

DIV 1

  • class the DIV as div_1
  • 50% width, float left, absolute position left

DIV 2

  • class the DIV as div_2
  • 50% width, float right, absolute position right

Create 1 Text Block (class tb_1)…

  • position the Text Block (tb_1) inside div_1.

Add a Hover (mouseOver) to div_1… that moves tb_1 down 50, - then up 50.

Copy this Text Box (tb_1)… paste it into div_2… so you have the same class for the Text Box.

NOTE: To test this ---- I did a Copy / Paste (if tb_1… from div_1 to div_2)…

  • I did not manually recreate the Text Bock in div_2.

You should have:
div_1-> tb_1
div_2 → tb_1

Do not add a Hover (mouseOver) to div_2.

Preview it.

Does the Text Box (tb_1) appear in both DIV’s ?

When you mouseOver div_1… does it also affect the Text Block in div_2 ?

Remember the classes are the same for the Text Blocks

  • but they are in different DIV’s.

If they are different DIV’s… should they not be treated independently ?

You can over-ride properties of a class… but you can’t seem to over ride interactions.
---- Remember… a Hover (mouseOver) was not added to div_2.

It seems interactions are “global”. The Hover (mouseOver) created for div_1… affects the same Text Block class (tb_1) in div_2.

For me to have “a similar Text Block” in div_2…

  • and have it NOT AFFECT the Text Block in div_1 - and vice versa
  • it seems I have to create another Text Box (for div_2)
  • and create a separate class for it…
  • even though the properties are exactly like the Text Block in div_1

So I end up with:

div_1-> tb_1
div_2 → tb_2

Is this a bug - a css limitation - or me mis-understand how css / webflow works.

The interaction will effect all classes that you are targeting by default. You can use the nested and sibling options to avoid this. In your case it sounds like the nested option is your best bet.

1 Like

Yes, That’s what I thought as well.

There seems to be a bug here somewhere.

Sometimes this works… sometimes it does not.

I haven’t quite figured out how to recreate it yet.

I removed classes one by one

  • and tracked it down to a interaction assigned to a div:click.

Even cleaning the project of old classes didn’t fix the issue.

I documented every step and every property using Excel

  • and recreated every step and every property… and the bug reappeared. Twice.

After a high level of frustration (14 hours)… I decided

  • to recreate the entire project from scratch.

3 days of work… redone in 6 hours.

The problem did not pop it’s head up this time.

I’ve pretty much doubled the amount of time

  • I’ve spent on this project (so far).

But at least - the project is actually a bit “cleaner”.

I know there is a bug here somewhere…

  • unfortunately it’s one of those where you have to
  • “do something to make something else happen”
  • before the problem is evident. :frowning:

And I’m running nose-in to a deadline.