CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Max Power
Max Power

Reputation: 153

adding/removing z-index on hover

I'm attempting to add or remove the z-index property on two separate divs as the user hovers on them.

The catch is I have some Jquery written so it keeps the z-index property as the mouse is moved away, this is so there is a smooth transition. https://jsfiddle.net/45wdhdjy/1/

$(".w-1").one("mouseover", function() {
  $(".w-1").addClass('permahover');
});

My problem is after hovering over the blue div the yellow div fails to have a greater z-index on its hover. I have a feeling the solution is joining both of my scripts into one if statement but I'm unsure how to go about this. Would anyone be able to point me in the right direction?

Upvotes: 1

Views: 1577

Answers (3)

Ashkan Mobayen Khiabani
Ashkan Mobayen Khiabani

Reputation: 34160

Just use the css, its better, cleaner:

.w-1{z-index:0;}
.w-1:hover{z-index:1000;}

of course I ignore other css styles the class might have. the class must also have a position style defined for it otherwise z-index won't work;

Considering the comments: HTML:

<div class="wrapper">
 <div class="work-1"></div><div class="work-2"></div>
</div>

CSS:

.wrapper {
  display: inline-block;
    position: relative;
    width: 60%;
    transition: all ease 0.4s
}

.work-1, .work-2 {
    transition: all ease 0.4s;
    width: 50%;
  height: 300px;
display:inline-block;

}

.work-1 {
    background-color: #FEF102;
}

.work-2 {
    background-color: #4B3E7F;
}

.active{width:100%;}
.inactive{width:0%;}

JAVASCRIPT:

$('.wrapper div').mouseover(function(){
     $('.wrapper div').not($(this)).addClass('inactive');
     $(this).addClass('active');
}).mouseout(function(){
     $('.wrapper div').removeClass('active').removeClass('inactive');
});

DEMO

Upvotes: 3

Wilder Perozo
Wilder Perozo

Reputation: 161

well... i tried your code and this works in file js

$(".w-1").on("mouseover", function() {
    $(".w-2").removeClass('permahover2');
  $(".w-1").addClass('permahover');
});

$(".w-2").on("mouseover", function() {
  $(".w-2").addClass('permahover2');
  $(".w-1").removeClass('permahover');
});

for each event remove class the other div.

Upvotes: 2

Warren Mira
Warren Mira

Reputation: 242

Your mouseOver is fired only once. You should be able to do the effect by using on and removing the permahover on each div. 

$(.w-2).removeClass('permahover2')

Before each call. Please see this fiddle https://jsfiddle.net/45wdhdjy/1/

Upvotes: 1

Related Questions