CSS動畫。從[display none;寬度：0]到[顯示內聯;寬度：自動]

我有一個隱藏的跨度在另一個跨度。當我將鼠標懸停在外部跨度上時，我想讓隱藏的內容滑動並顯示。CSS動畫。從[display none;寬度：0]到[顯示內聯;寬度：自動]

<span class="outer">Things: <span class="number">5 <span class="details">[3 widgets, 2 spanners]</span></span></span>

的CSS：

.outer { 
    border: 1px solid grey; 
    border-radius: 4px; 
    padding: 7px; 
    margin: 1em; 
    font-family: Verdana; 
} 

.number { 
    background-color: green; 
    color: white; 
    padding: 3px 7px; 
    border-radius: 4px; 
} 

.details { 
    display: none;  
} 

.outer:hover .details { 
    display: inline; 
}

下面是我所沒有的動畫工作的例子：http://jsfiddle.net/QSQBV/13/

我想隱藏的範圍從0增長到寬「自動」或褪色英寸

- 編輯 -

OK，我吮吸jsFiddl e，我想我忘了保存它或者什麼，但是舊的鏈接並沒有顯示我之後的效果。新的更新鏈接確實會顯示效果。

來源

2012-09-28 we-all-fall-down

您需要給background-color以使不透明度正常工作。

這是你所需要的？ JSFiddle鏈接：http://jsfiddle.net/QSQBV/73/

編輯：根據您的要求更新JSFiddle。希望這是你需要的！我用div代替span雖然

來源

2012-09-28 15:53:33 BlackCursor

CSS動畫。從[display none;寬度：0]到[顯示內聯;寬度：自動]

回答

相關問題