Question

当用户将鼠标悬停在图标上时，如何使用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;
}

Answer 1

Html

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

CSS：

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

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

Answer 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

将鼠标悬停在图标上时，如何更改图标的颜色？

2 个答案: