[問題] 請問關於css3 2d轉換的問題

[sthermit ( )]

剛才在研究css

發現css3有辦法作出動畫效果


就先練習2D的轉換，參考了w3c上面的範例

目標是希望可以讓div可以變長變短


這是我寫的css

.accordion-content{
        width:100%;
        height:0px;
        background:yellow;
        transition:height 2s;
        -moz-transition:height 2s; /* Firefox 4 */
        -webkit-transition:height 2s; /* Safari and Chrome */
        -o-transition:height 2s; /* Opera */
}
.accordion-content-hover{
        height:200px;
}


可是剛才試過之後

發現跟我想像的不一樣

DIV的高度沒有改變，一直都固定顯示

當觸發改變的時候背景的黃色長度會慢慢變長到200px


可是我希望是整個都一起變化

請問應該怎麼修改？


謝謝各位






--
※ 發信站: 批踢踢實業坊(ptt.cc), 來自: 211.22.92.217
※ 文章網址: https://www.ptt.cc/bbs/Web_Design/M.1423472622.A.4E4.html
→ taiwan08: 先確認是不是你打錯 .accordion-content:hover
→ crossdunk: :hover
其實沒有打錯！
因為hover的觸發是在另一個物件，我是用jQuery去add class

東西也真的可以動作...只是有動作的只有背景顏色

→ taiwan08: http://jsfiddle.net/102q7m3w/
做出來的結果向這位朋友一樣，只是我希望可以連顯示文字的區塊也這樣子

請問有方法嗎？
※ 編輯: sthermit (58.114.184.93), 02/10/2015 00:00:54
→ taiwan08: 其實我不懂妳說的"整個都一起變化"是什麼東西有變化
→ taiwan08: 以為要問的是CSS，結果連jquery都出現了
→ taiwan08: 不把整個網頁的原始碼丟上來嗎?
推 aspdoctor: 因為你動的只有容器的高度，裡面的東西當然就只是跟著
→ aspdoctor: 容器一起滿出來，不知道你要的是什麼效果，如果跟我想
→ aspdoctor: 的一樣那可以搭配transform的scale跟translate來做到
推 tw0517tw: 容器變大了 裡面的東西沒有變大阿