Question

好吧，我以为我能做到这一点没问题，但由于某种原因，我无法弄明白。

我想要三个盒子，它们有点像卡片。中间框显示负载，其他两个后面。然后，当用户悬停在一个上面时，它的z-index会增加，并且框会在前面。这些框将保持在页面加载时的完全相同的位置，我只想让它们完全出现在悬停上，我假设可以通过切换它们的z-index来完成。

据我所知：http://jsfiddle.net/q8nYz/（我现在就点击了）

<div id="#container">

    <div id="box-1" class="box"></div>
    <div id="box-2" class="box active"></div>
    <div id="box-3" class="box"></div>

</div>

#container {
    margin: 0 auto;
    position: relative;
    width: 960px;
}

.box {
    background: gray;
    border: 2px solid black;
    float: left;
    height: 300px;
    position: absolute;
    width: 300px;
    -webkit-border-radius: 10px;
}

#box-1 {

}

#box-2 {
    left: 200px;
}

#box-3 {
    left: 400px;
}

.active {
    z-index: 1;
}

$(".box").click(function() {

    if ($(".box").hasClass("active")) {
        $(".box").removeClass("active");
    }

});

Answer 1

类似这样的事情 - http://jsfiddle.net/q8nYz/2/

.box:hover{
     z-index: 100;   
}

它只需要css。

Answer 2

您只需要将active类添加到单击的框中，使用：

$(this).addClass("active");

我updated your fiddle。

编辑我更喜欢this idea。它“将它们移回”而不是仅将它们移到前面。这种感觉更自然（尝试改变它们）。

$(".box").click(function() {
    $(".box").css("z-index", function() {return $(this).css("z-index") - 1;});
    $(this).css("z-index", 3);
});

Answer 3

两件事，z-index需要大于1（默认为1）。在引用点击的项目时，您需要使用$(this)而不是.box来停止添加并从中删除所有类。

我认为这就是你想要的：http://jsfiddle.net/q8nYz/15/

jQuery添加/删除类

3 个答案: