zIndex reset after hover off

[wrongholt]

So I am trying to get hover on and off to work with zIndex.  I have attached my code pen forgive me if there are some errors it was my first time creating one.  I have images that are overlapped like on the code Pen and I want the zIndex to come forward (hover on)and than reset after (hovering off).  I originally have the zIndexes set on the images(in CSS) prior to messing with them in JS.  Any help would be greatly appreciated.

See the Pen WEpLQO by wrongholt (@wrongholt) on CodePen

[PointC]

Hi @wrongholt

 

Welcome to the forum.

 

Just a couple changes and you'll be good to go. Your selector should change:

// switch this
var thumbs = document.querySelectorAll('#redBox', "blueBox");
//to this
var thumbs = document.querySelectorAll( "#blueBox, #redBox");

 

Then you can clearProps of the zIndex when you hover off the element. Here's a fork of your pen:

 

See the Pen gxmqrv by PointC (@PointC) on CodePen

Hopefully that helps.

 

Happy tweening.

[mikel]

Hi @wrongholt,

 

Or ... if you want it a little bit shorter ...

 

See the Pen jLBdzj by mikeK (@mikeK) on CodePen

 

Best regards

Mikel

[wrongholt]

Thank you so much for quick responses its appreciated and I like the clearProps idea better mainly because I think it is more clear on what it is doing.  Thanks again!