changing the z-index when hovering over an element

Question

changing the z-index when hovering over an element

My goal is to dynamically adjust the z-index property of two different divs as the user hovers over them.

The challenge lies in maintaining the z-index values even after the mouse has moved away, creating a seamless transition effect. You can view my code implementation here: https://jsfiddle.net/45wdhdjy/1/

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

However, I have encountered an issue where hovering over the blue div does not result in the yellow div having a higher z-index value during its hover state. I suspect that consolidating both scripts into a single if statement might solve this problem, but I'm unsure how to proceed. Can anyone provide guidance on how to achieve this?

javascript jquery html css

Answer 1

Answer №1

Utilize CSS for a better and cleaner code:

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

Note that the class must have a defined position style for z-index to work properly;

Here is the HTML structure:

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

Corresponding CSS styles:

.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%;}

For JavaScript functionality, use the following code:

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

Check out the DEMO here

Answer 2

Utilize CSS for a better and cleaner code:

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

Note that the class must have a defined position style for z-index to work properly;

Here is the HTML structure:

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

Corresponding CSS styles:

.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%;}

For JavaScript functionality, use the following code:

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

Check out the DEMO here

Answer 3

Answer №2

After implementing your suggested code, I found that it successfully works in the JavaScript file.

$(".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');
});

The code ensures that each event removes the class from the other div accordingly.

Answer 4

After implementing your suggested code, I found that it successfully works in the JavaScript file.

$(".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');
});

The code ensures that each event removes the class from the other div accordingly.

Answer 5

Answer №3

When it comes to your mouseOver, remember that it only fires once. To achieve the desired effect, consider using the 'on' method and removing the permahover on each div.

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

Make sure to do this before each call. For an example, check out this fiddle https://jsfiddle.net/45wdhdjy/1/.

Answer 6

When it comes to your mouseOver, remember that it only fires once. To achieve the desired effect, consider using the 'on' method and removing the permahover on each div.

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

Make sure to do this before each call. For an example, check out this fiddle https://jsfiddle.net/45wdhdjy/1/.

changing the z-index when hovering over an element

Answer №1

Answer №2

Answer №3

Similar questions

Automatically insert nested object keys and values from jQuery into their respective div elements

The problem of retrieving an ID on hover in Jquery

How can we identify context menu events triggered by touch actions?

Using PHP to output setTimeout() function to JavaScript

Vue.js produces excessive white spaces in the generated HTML

I am looking to send the ids retrieved from the model($data) back to the controller

Incorporate a sidebar navigation menu within the WordPress media uploader

Fetching data from a server using Angular and displaying it in controllers

Guide on achieving a seamless scrolling effect to an identifier following the selection of a hyperlink from a different webpage

What is the best way to align the icon in the middle of these social buttons?

Issue encountered while trying to install Yeoman on Yosemite

What is the best way to apply a top padding to a background image using CSS?

Display data when clicking on Tailwind

Make sure the bootstrap div rows are aligned side by side consistently, even when resizing the window

Displaying all API data by default in Vue.js, even with filters, sorting, and search enabled - how can it be done?

Troubleshooting the Alignment Problem in Bootstrap 4 Modals

How can you ensure that the results are displayed only when all the fields in the form are properly

Implementing the 'not-allowed' cursor style on disabled rows in Material UI datagrid

Deleting tags using jQuery

What is the best way to combine two objects in JavaScript without replacing any values and incorporating the properties of both?