If you have 2 or more fix elements that sit on top of each other
ie: header options that change color based on the current screen
the order of the elements will dictate which hover effect will occur.
If you have a z-index on 1 element of 1000 and 999 on the other.
Hiding (changing the visibility) of the element at 1000
- does not allow the hover transitions of the element @ 999 to occur.
Click still works… but hover does not. This is a bit frustrating.
As a fix… I will try to move the element out of the way instead of hiding it.
This is how HTML/CSS works, Webflow has little to do with this. The rule is: “There is no way to hover over an element that is behind another element.” Even if none has a z-index defined. The rendering order makes it so, too.
“This is how HTML/CSS works, Webflow has little to do with this.”
Yes, I know… it’s not a WebFlow issue. That’s why I didn’t report it as a bug.
Though it’s still irritating no less.
I’m trying to avoid the js route… but may not be able to.
And I think I found a way around it… an avoided JS.
I would prefer to keep as much in CSS as possible.
Say you have 2 fixed elements - they both share the same links “Services” and “Why Hire Us”.
Fixed Element 1 is a Section white on black.
Fixed Element 2 is a Section black on white.
Services is white on black.
Why Hire Us is black on white.
On Click Services… change visibility of Fix Element 1 to 100% Inline Block / Fixed Element 2 to 0% Hidden.
On Click Why Hire Us… change visibility of Fix Element 1 to 0% Hidden / Fixed Element 2 to 1000% Inline Block.
So far this works… still playing with it.
Video before the fix:
Video after the fix:
Confirmed. This definately works.
As @vincent mentioned… the z-index issue is an html / css “drawback” - not webflow.
A fix is to use js… but another fix is to literally remove the block… not just change the visibility.
This has to be done on all events… ie: hover, scroll, click.
Try this one…CSS Hover Effects