将鼠标悬停在元素上时，为其上方的锚点上色

Question

将鼠标悬停在另一个元素上时，我在给锚着色时遇到问题。

<li>
    <a target="_blank" href="" class="font-weight-bold">News</a>
    <div class="badge badge-primary">0</div>
    <a href="" class="info text-muted">The most recent news</a>
</li>

当我翻过.info时，我想更改“新闻”元素的颜色。

>li {
    a:first-child {
        display: inline-block;
        color: black;
    }

    .info {
        &:hover {
            a:first-child& {
                color: red;
            }
        }
    }
}

在.info上，我也尝试过添加类名并更改该特定类的颜色，但是没有任何效果！有什么想法吗？