Interaction to change z-index

Design help Custom code
1

I am wondering if there is a way to create an interaction where a hover on object A changes the z-index of object B?

2

@Marcel_Deelen you can’t do this natively in Webflow, but with some custom code you should be OK. Remember, for this to work the element must be either absolutely positioned, relatively positioned, or fixed. The custom code could look something similar to this:

$(".your-element").hover(function(){
    $(".other-element").css("z-index", "10");
    }, function(){
    $(".other-element").css("z-index", "1");
});
1 Like
3

Hi, I am trying to use this technique but with several elements rather than just 2, how do I modify the code so that there are multiple “other-elements”, for example “other-element-1”, “other-element-2” etc?

4

I’m by no means a an expert, but the code below should work for you (assuming the code above works with a single element):

$(".your-element").hover(function(){
    $(".other-element-1").css("z-index", "10");
    $(".other-element-2").css("z-index", "10");
    }, function(){
    $(".other-element-1").css("z-index", "1");
    $(".other-element-2").css("z-index", "1");
});
2 Likes
5

Thanks Mike, I know even less so thanks for your support, I can use this as a guide to add multiple classes to other scripts, I had googled how to do it but I couldn’t find anything clear. Your help is appreciated!

6

Tell me how to connect this code to the div block classes?

7

.your-element from the code given is where you put your class name.