Streaming live at 10am (PST)

Hover Effects not recognized on lower z-index elements


#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


#7

#8