CSS - 悬停时，突出显示元素(以及内部元素)

Question

我正在使用字体图标，我正在尝试获取图标以及 <a>当鼠标悬停在它周围时，标签会改变颜色。

<div class="container">
    <ul>
        <li>
            <a href="#">
                <i class="fa fa-user-circle fa-lg"></i>
            </a>
        </li>
    </ul> 
</div>

还有 CSS:

.container {
    background-color: blue;
    width: 100%;
    position: fixed;
    top: 0;
}

.container a {
    padding: 20px;
    text-decoration: none;
    cursor: pointer;
    transition: background-color cubic-bezier(.170, .70, .49, 1) .5s,
    color cubic-bezier(.170, .70, .49, 1) .3s;
}

所以当<a>标签悬停，我想要 <a>标签以及内部 <i>使用 <a> 改变颜色的标签得到它的 background-color改变了，并且<i>有它的color变了。我尝试了以下方法:

.container a:hover {
    background-color: purple;
    color: red;
}

这将得到 background-color在悬停时变为紫色，但是 <i> <a> 内的标签标签不会变成红色。

Answer 1

那是因为您没有选择 <i> .

.container a:hover {
    background-color: purple;
    color: red;
}

.container a:hover > i {
    color: red;
}

您必须选择 <i>在<a>里面