Hover z-index change (divs rebound)

Question

I am trying to change this code so that each box comes to the fore when the mouse freezes in this field.

Any suggestions or help would be appreciated!

.bouncyHouse {
   height:200px;
   width:150%;
   background-color: black;
   position: relative;
}

.bouncer {
   position: absolute;
   width: 200px;
   color:white;
   font-size:50px;
   background-color:yellow;
}

.bouncer:nth-child(2){
   top: 30px;
   left: 100px;
   background-color:green;
}

.bouncer:nth-child(3){
   top: 50px;
   left: 200px;
   background-color:red;
}

Answer 1

Have you tried using the class: hover psuedo.

.bouncer:hover {
    z-order: 1;
}

Answer 2

check this

https://jsfiddle.net/qwLpf1vr/2/

.bouncer:hover{
    z-index:1000;
    background-color:skyblue;
}

OR without changing the background color

https://jsfiddle.net/qwLpf1vr/4/

Answer 3

css hover .bouncer, z-index

.bouncer:hover {
    z-index: 1;
}

JSFIDDLE DEMO

Answer 4

...

$('.bouncer').hover(function(){
    $('.bouncer').css({"z-index" : "9"});
    $(this).css({"z-index" : "999999"});
});

script..