当我将鼠标悬停在图标上时，如何更改图标的颜色？ [复制]答案

【问题标题】：How do I change the color of the icon when I hover my mouse on it? [duplicate]当我将鼠标悬停在图标上时，如何更改图标的颜色？ [复制]
【发布时间】：2018-03-13 14:59:55
【问题描述】：

I got the icon like this

当用户将鼠标悬停在图标上时，如何使用 HTML 或 CSS 将蓝色更改为不同的颜色？

更新：这是css代码：

.timeline-centered .timeline-entry .timeline-entry-inner .timeline-icon {
    background: #fff;
    position: absolute;
    color: #737881;
    display: block;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    text-align: center;
    -moz-box-shadow: 0 0 0 5px #f5f5f6;
    -webkit-box-shadow: 0 0 0 5px #f5f5f6;
    box-shadow: 0 0 0 5px #f5f5f6;
    line-height: 40px;
    font-size: 15px;
    float: left;
}

.timeline-centered .timeline-entry .timeline-entry-inner .timeline-icon.bg-primary {
    background-color: #309BDF;
    color: #fff;
}

.timeline-centered .timeline-entry .timeline-entry-inner .timeline-icon.bg-primary:hover {
    background-color: #a3bbe0;
    color: #fff;
}

【问题讨论】：

向我们展示您的尝试？
发布你的代码添加sn-p。
把代码放在这里！因为有很多方法

标签： html css twitter-bootstrap

【解决方案1】：

HTML

<div class="bg">
</div>

CSS：

.bg{
width:20px;
height:20px;
background-color:green;
}

.bg:hover{
  background-color:red;
 }

【讨论】：

这有什么问题？如果您不知道答案，请让其他人回答。不要放弃投票...

【解决方案2】：

使用filter 属性，很可能调整hue-rotate 以获得预期的颜色：

img:hover {
    -webkit-filter: hue-rotate(90deg); /* Safari 6.0 - 9.0 */
    filter: hue-rotate(45deg);
}

来源：https://www.w3schools.com/cssref/tryit.asp?filename=trycss3_filter_huerotate

【讨论】：