Javascript 使用CSS3进行条件样式化？

好的，下面是一个场景：

假设我有这样的设置：

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

我正在使用CSS将li的样式设置为大型浮动框。。。 使用css的：悬停和：活动（条件？）更改样式，例如背景颜色和高度等

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

• 就本机而言，李的高度为100px，跨度为0px
• 悬停时，li的高度增加到150px，跨度的高度增加到50px

这将导致一个动画，看起来像一个纯文本框，当鼠标悬停在上面时，将显示一个图像以补充文本

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

---

顺便说一句，

：hover

被简单地称为伪类。另外，

：在IE7及以下版本中，对非链接元素的hover

支持是粗略的。

动画可以通过

transition

属性及其子属性，加上浏览器特定的前缀（当前

-webkit-

，

-moz-

，

-o-

，以及

-khtml-

）完成：

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

---

您可以添加多个属性，也可以使用三次Bézier曲线作为缓和函数。通过谷歌搜索，你可以找到很多很棒的资源。

因为你是专门谈论css3动画的，我想你不关心internet explorer，也不关心旧版本的浏览器

---

有了这些，看看这个小提琴-

悬停和活动是CSS中的伪类->啊，这就是它们的名字。。。谢谢你的提醒…默认情况下，

span

有

display:inline

，这意味着

height

没有效果。@Mike我读到OP已经“将它们设置为大型浮动框”，但可能他只是在谈论

li

s.Lol，我意识到让每个人都知道我在说什么是最容易的。。。将更新OP以添加到相同的链接…哈哈，耶。。。我这样做更多的是为了学习和在浏览器上做一些很酷的事情，所以是的，我没有商业化任何可能需要符合IE或旧浏览器的东西。。。！！！哇，我没想到会用CSS3选择器这样。。。当元素li悬停在其上时，更改其子元素之一的CSS属性。。。有趣的。。。我想你已经有效地解决了我的问题。。。让我在我的实现中测试一下…好的，这就成功了。。。非常感谢你。。。添加一个链接到我试图实现的任何方式。。。

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

transition: height 0.5s ease-in-out; /* transition the height for half a second using 2-way easing */