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.