悬停时更改z-index（弹跳div）

Question

我试图修改这段代码，使得鼠标悬停在哪个方块上，该方块就能置于最前面。

如果有建议或帮助将不胜感激！

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

- Lily

---

https://jsfiddle.net/qwLpf1vr/1/ - Lily

https://jsfiddle.net/1zxtjgx5/ - Ram

当鼠标悬停在第三个 .bouncer 元素上时，背景颜色将变为蓝色。 - HEMANT SUMAN

Answer 1

你是否尝试过使用:hover伪类？

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

- Jim

Answer 2

请检查这个链接

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

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

或者不改变背景颜色

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

- Man Programmer

Answer 3

您可以为 .bouncer 添加 CSS 的 hover，来设置它的 z-index。

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

JSFIDDLE DEMO

- Dyrandz Famador

Answer 4

你也可以尝试这个...

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

将以下代码添加到您的脚本中..

- Faisal Rocky

---

我认为唯一的问题是，使用CSS比使用Javascript更有效，不是吗？ - brads3290