当悬停时，Glyphicon更改颜色

Question

当我悬停在li > a上时，如何使我的glyphicon也改变颜色。 我列出了我的html以及我在css中尝试做的事情。 但是只有在我悬停在glyphicon上时才会改变它，而不是在a上。 是的，我也尝试过在a上更改它，但这不会影响我的glyphicon。

HTML：

<li class="pushy-item">
     <a href="#">History 
          <span class="glyphicon glyphicon-list-alt opacityDown pull-right"></span>
     </a>
</li>

CSS:

    ul > li > a > .glyphicon:hover{
    color: orange;
}

`

- UnScope

---

你不是改变图标的颜色，而是更换图标！ - Siddharth

嗯，什么？@Siddharth - UnScope

Glyphicons其实就是一张大图片的一部分，我们只是在鼠标悬停或其他事件发生时改变了背景的位置。请搜索“CSS雪碧图”以获取更多信息。 - Siddharth

@Siddharth 我在底部找到了答案。 - UnScope

@Siddharth 你是什么意思？它起作用了，而且正是我所需要的？ :P - UnScope

能分享一下那段代码或者示例吗？我有点困惑。 - Siddharth

Answer 1

你可以尝试这个方法：

ul > li > a:hover > .glyphicon

- Nora

---

没错！谢谢 Nora - UnScope

我甚至不理解这个。那是CSS代码吗？>是什么意思？ - Kellen Stuart

从文档中得知：子级组合器（>）放置在两个CSS选择器之间。它仅匹配第二个选择器匹配的那些元素，这些元素是由第一个选择器匹配的元素的子元素。 - Nora

Answer 2

div > .glyphicon-heart:hover  {
    color: rgb(102, 102, 101);
    cursor: pointer;
}

<div class = "heart">
    <span class = "glyphicon"
        [class.glyphicon-heart] = "isLiked"
        (click) = "onClick()" >
    </span>
</div>

- Ahadu Melesse

---

你需要描述你的解决方案。 - Michael