Question

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

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

以及我喜欢做的是，当鼠标悬停在li或a元素上时，为li和a元素设置背景选项的动画。 / p>

以下是 jsFiddle 示例。

在上面的例子中，您可以看到li是动画的，但内部元素不会获得任何动画。我该如何解决这个问题？

当鼠标悬停在background元素上时，我需要更改每个嵌套节点的li选项。

CSS3是否可以使用？

亲切的问候

Answer 1

您可以轻松为子元素设置动画，但不能为父元素设置动画。

要在悬停父a元素时为li设置动画，您可以更改选择器，如下所示：

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

但是，当a悬停时，你不能对li做同样的反应。

对于该任务，您需要Javascript或当前未在任何浏览器中实现的Selectors Level 4 Subject "Indicator"。

由于这些事件会冒泡，因此很可能没有必要将鼠标悬停在a元素上，而只放在li上。