javascript - 使用 CSS3 进行条件样式设置？

Question

好的，这是场景:

假设我有这样的设置:

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

我正在使用 CSS 将 li 的样式设置为大型 float 框... 使用css的:hover和:active(conditions?)改变样式，比如背景颜色和高度等等...

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

• 自然地，Li 的高度为 100px，而 span 的高度为 0px
• 悬停时，li 的高度增加到 150px，而 span 的高度增加到 50px？

这将产生一个看起来像带有纯文本的框的动画，当悬停在其上时将显示图像以补充文本。

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

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 }