嵌套元素的CSS3转换。可能吗？

我正在尝试构建一个CSS按钮，它基于以下标记：

<ul class="menu">
    <li>
        <a href="#">
            <i class="icon-facebook"></i>
        </a>
    </li>
</ul>

我喜欢做的是，当鼠标在

li

或

a

元素上时，为

li

和

a

元素的背景选项设置动画

下面是一个示例

在上面的示例中，可以看到li已设置动画，但内部元素没有任何动画。我怎样才能解决这个问题

当鼠标悬停在

li

元素上时，我需要更改每个嵌套节点的

background

选项

CSS3可以这样做吗

---

您可以轻松地设置子元素的动画，但无法设置父元素的动画

要在悬停父元素

li

时设置

a

的动画，可以按如下方式更改选择器：

li:hover a{
    /* now applies to the anchor, when the parent li is hovered*/
}

但是，当a悬停时，不能对li执行相同的操作，反之亦然

对于该任务，您需要Javascript或当前未在任何浏览器中实现的

---

由于这些事件是冒泡的，所以很可能不需要在

a

元素上放置鼠标悬停，而只需在

li

上放置鼠标悬停，如果您想要类似父选择器的内容，则不需要。另一方面，您真的需要区分a:hover和li:hover吗？请提供更多详细信息。@ogur我的问题已更新：）谢谢