Javascript 更改悬停时的z索引（弹跳divs）

当鼠标悬停在盒子上时，我试图改变使每个盒子都在前面

任何建议或帮助将不胜感激

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

检查这个

或者不改变背景颜色

---

您可以为

.bouncer

添加css

悬停

，以设置其

z索引

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

---

您也可以试试这个

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

---

将此代码添加到脚本中。

.bouncer:nth child（3）：hover{background color:blue；}我认为唯一的问题是CSS比使用Javascript更有效，不是吗？

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