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番目と5番目が機能しないことです（コードは完全に同じです）。最初の2番目と3番目のボックスは正常に機能します。私の考えは、すべてのボックスが機能するように、この問題をどのように解決できるかということです。

助けを求めています。感謝

4

2 に答える 2

2

問題が何であるかはよくわかりませんでしたが、@ robが言ったように、IDがDOM内で一意でなければならない場合、複数のIDのようなHTMLエラーがあり、デバッグしようとするときのあなた自身の正気のために、コードでDRY同じアニメーションをすべてのボックスに適用できます。たとえば、繰り返す必要はありません。
私がしたことは、IDから始まるコードを段階的にリファクタリングすることでした

<div class="box3 box">

修正コード: http://jsfiddle.net/e592S/1/

于 2012-12-08T15:03:58.060 に答える
1

「id」は、ページ上の 1 つの要素に対して一意である必要があります。これが問題であるかどうかを確認するテストは行いませんでした。「クラス」名を付けることで解決するかどうかを確認してください。

于 2012-12-08T14:47:45.207 に答える