jQuery添加/删除类

Question

好吧，我认为我可以做到这一点没有问题，但由于某种原因，我无法弄清楚。

我想拥有三个盒子，堆叠起来就像卡片一样。中间的盒子显示负载，另外两个在后面。然后，当用户悬停在一个，它的Z指数增加，箱子在前面。这些框会保持与页面加载完全相同的位置，我只想让它们完全显示在悬停上，我假设可以通过切换它们的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类添加到cl的框中即可icked，使用：

$(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/