使用CSS3进行条件样式设计？

Question

好的，这就是场景：

说我有这样的设置：

<ul>
    <li>
        <span></span>
    </li>
</ul>

我正在使用CSS为li设置样式为大型浮动框... 使用css：hover和：active（条件？）来改变样式，例如背景颜色和高度等......

现在，问题 - 使用JUST css，我可以定义它：

• 当然，Li的高度为100px，跨度为0px高度
• 在悬停时，li的高度增加到150px，跨度的高度增加到50px？

这将导致动画看起来像一个带有纯文本的框，当盘旋时会显示图像以补充文本。

编辑 - 这是一个指向小提琴的链接，展示了我的目标。黄色部分应该是外部图像。这是通过实施此问题中提供的解决方案来实现的。

http://jsfiddle.net/abhi/JMz8F/2/embedded/result/

Answer 1

li { height: 100px }
li > span { display: none; height: 50px }
li:hover { height: 150px }
li:hover > span { display: block }

Answer 2

li { height: 100px; }
li span { height: 0; }

li:hover { height: 150px; }
li:hover span { height: 50px; }

BTW，:hover简称为伪类。此外，对于非链接元素的:hover支持在IE7及以下版本中是粗略的。

Answer 3

由于你专门谈论css3动画，我认为你不关心Internet Explorer，也不关心旧版本的浏览器。

有了这个，请看这个小提琴 - http://jsfiddle.net/ZYaKh/3/

Answer 4

动画可以使用transition属性及其子属性以及浏览器特定的前缀（目前为-webkit-，-moz-，-o-和{{1}来完成}）：

-khtml-

您可以添加多个属性，并使用立方贝塞尔曲线作为缓动函数。谷歌搜索可以找到很多很好的资源。