好了，所以这里的情景：使用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