0

我正在开发一个小的 CSS3 菜单。现场示例：http: //jsfiddle.net/e592S/

（代码满了很长）

/*Fifth Box*/
@-webkit-keyframes myFifth {
    0% {
        right: 300px;
        top: 13px;
        background: #D0D0D0;
        opacity: 0;
    }

    100% {
        background: #909090;
        right: 300px;
        top: 63px;
        opacity: 1;
    }
}

#box.box5 {
    top: 113px;
}

#littlebox5 {
    top: 053px;
    position: relative;

}
#bothcontaine5:hover ~ .box5 {
    -webkit-transition: all 0s;
    right: 300px;
    top: 63px;
    -webkit-animation: myFifth .75s;
    -webkit-animation-fill-mode: initial;
    opacity: 1;
    background: #909090;
    right: 300px;
    -webkit-animation-fill-mode: initial;
}

#bothcontainer5:hover .littlebox-sentence {
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#D0F2F9), to(#84CEFB));
}

#bothcontainer5:hover .triangle {
    border-right: 20px solid #909090;
}

问题是第四个和第五个不起作用，（代码完全一样）。第一个第二个第三个盒子工作正常。我的问题是如何解决这个问题，以便所有的盒子都能正常工作？

希望得到帮助。谢谢

4

2 回答 2

2

不太清楚问题是什么，但正如@rob所说，你有，并且可能仍然有html错误，比如多个id，当id在DOM中必须是唯一的，也是为了你自己在尝试调试时的理智，你应该尝试DRY在您的代码中，可以将相同的动画应用于所有框，例如，您不必重复它。
我所做的是从 id 开始逐步重构您的代码

<div class="box3 box">

更正代码：http: //jsfiddle.net/e592S/1/

于 2012-12-08T15:03:58.060 回答
1

“id”对于页面上的一个元素必须是唯一的。没有测试看看是不是这个问题。看看是否将其命名为“类”名称可以解决问题。

于 2012-12-08T14:47:45.207 回答