好了，所以這裏的情景：使用CSS3進行條件樣式？
說我有這樣的設置：
<ul>
<li>
<span></span>
</li>
</ul>
而且我使用CSS設置樣式爲李的要大浮動框... 使用CSS的：hover和：活躍（條件是什麼？）轉變作風，比如背景顏色和高度等等...
現在的問題 - 只用CSS，可我定義它，以便：
這將導致看起來像純文本框的動畫，當懸停時會顯示圖像以補充文本。
編輯 - 這裏是一個小提琴演示我的目標的鏈接。黃色部分應該是一個外部圖像。這是通過實施此問題中提供的解決方案實現的。
http://jsfiddle.net/abhi/JMz8F/2/embedded/result/
由於您正在專門討論css3動畫，我假設您不關心Internet Explorer，也不關心瀏覽器的老版本。
有了這樣的方式，看到這個小提琴 - http://jsfiddle.net/ZYaKh/3/
大聲笑，是的...我這樣做更多的是爲了學習和在瀏覽器上做很酷的事情，所以是的，我沒有商業化任何可能需要符合IE或更舊瀏覽器的東西...... – Abhishek 2011-05-20 04:04:52
!!!哇，我沒想過使用這樣的CSS3選擇器...當元素li被徘徊時，爲其子元素之一更改CSS屬性......有趣......我認爲你已經有效地解決了我的問題......只是在我的實現中測試這個...... – Abhishek 2011-05-20 04:06:18
好吧，這個做的伎倆...非常感謝你...添加一個鏈接，我試圖達到反正... – Abhishek 2011-05-20 05:08:34
li { height: 100px; }
li span { height: 0; }
li:hover { height: 150px; }
li:hover span { height: 50px; }
BTW，:hover被簡稱爲僞類。此外，在IE7和更低版本中，非鏈接元素上的:hover支持很粗略。
默認'span'有'display：inline'，這意味着'height'沒有效果。 – 2011-05-19 03:50:32
@Mike我讀到OP已經「將它們設置爲大型浮動框」，但也許他只是在談論「li」。 – deceze 2011-05-19 03:51:54
好點。我沒有建立這種聯繫。 – 2011-05-19 03:53:47
li { height: 100px }
li > span { display: none; height: 50px }
li:hover { height: 150px }
li:hover > span { display: block }
動畫可以與transition屬性及其子屬性，加上瀏覽器特定的前綴（目前-webkit-，-moz-，-o-和-khtml-）來完成：
transition: height 0.5s ease-in-out; /* transition the height for half a second using 2-way easing */
您可以添加多個屬性和對於緩動功能也使用三次Bézier曲線。 Googling可以找到很多很棒的資源。
懸停和活躍在CSS僞類 - > http://www.w3.org/TR/CSS2/selector.html#pseudo-elements – Sparky 2011-05-19 03:48:59
啊，這就是他們所說的......謝謝你們對陣隊友...... – Abhishek 2011-05-20 04:03:32