改变悬停时的z指数(弹跳)

Changing z-index on hover (bouncing divs)

本文关键字：弹跳 指数 悬停 改变      更新时间：2023-09-26

我试图改变这段代码，使每个框来到前面，当鼠标悬停在该框。

任何建议或帮助将不胜感激!
.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;
}

您试过使用:hover psuedo类吗? 

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

检查

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

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

OR不改变背景颜色

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

您可以为.bouncer添加一个css hover来设置其z-index 

.bouncer:hover {
    z-index: 1;
}
<<p> JSFIDDLE演示/strong>

你也可以试试这个…

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

相关文章：