Hover Effects not recognized on lower z-index elements

Publishing help General
1

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.

2

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.

However, once again, Javascript can do this.

3

“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.

4

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:
http://quick.as/wkA6T5Q8

Video after the fix:
http://quick.as/k105snzj

5

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.

6

Try this one…CSS Hover Effects

Mercal