CSS类不工作

Question

我设置了一堆 div，当您将鼠标悬停在父级上时，我试图在子级 div 上交换类。现在我正尝试用 jQuery 来做，但我也很乐意使用伪类。

悬停不起作用，我认为这是因为样式被列为内联，但是当我从内联中删除样式并将其作为一个类执行时，整个 div 就消失了。它应该是一个 3d 堆栈，所以它只是一个具有白色背景和不透明度设置的 div。

---

div 是:

<div id = "3dstack_4" class = "3dstack_4_nohover"></div>

...我将类(class)列为:

.3dstack_4_nohover {
    border:0px solid red;
    -webkit-transform: translate3d(1px, 14px, 0px);
    position:absolute;
    z-index:12;
    height:34px;
    width:46px;
    background-color:#ffffff;
    opacity:.3;
}

---

这是 jsFiddle: http://jsfiddle.net/7EH7X/4/ .感谢您对此有任何想法。

Answer 1

我会使用 CSS 来做到这一点。这是一个非常简单的例子:

HTML

<div id="container">
    <div>A</div>
    <div>B</div>
</div>​

CSS

#container > div {
    display: none
}
#container > div:first-child {
    display: block
}
#container:hover > div {
    display: block
}​

然后随着您的进步添加其他详细信息。这是 DEMO

祝你好运。