css - 避免悬停过渡时文本和背景颜色的不同变化速度

Question

我有一个问题，我有一个 hover 效果，它不会为文本 color 呈现与 background-color 相同的变化改变。

有什么办法可以避免这种不同的过渡行为吗？

---

这是一个活生生的例子:

* {
    -webkit-transition: all 2s linear;
    -moz-transition: all 2s linear;  
    -o-transition: all 2s linear;  
    transition: all 2s linear;
}

.maps-btn {
    margin: 10px;
    padding: 10px;
    background-color: #f0f0f0;
    color: blue;
}

.maps-btn a {
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    text-decoration: none;
}

.maps-btn i {
    font-size: 25px;
    vertical-align: sub;
}

.maps-btn:hover,
.maps-btn:hover i,
.maps-btn:hover a {
    background-color: blue;
    color: #fff;
}

<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="maps-btn">
    <a href="https://www.google.com/maps/dir/?api=1&amp;destination=Frankfurt Main, Germany" target="_blank">
        <i class="fa fa-map-marker" aria-hidden="true"></i>
        Show on map
    </a>
</div>

Answer 1

我在 this fiddle 中得到了工作.有几个问题:

1. 您正在将 a 和 i 元素的 background-color 从透明过渡为蓝色 - 您应该让它们保持透明。
2. i 有颜色inherit，这导致了奇怪的行为，因为它和它的父级同时转换了它们的颜色。

更改:将 color: blue; 添加到您的 .maps-btn i CSS，并将您的 hover css 替换为:

.maps-btn:hover {
    background-color: blue;
}

.maps-btn:hover a i,
.maps-btn:hover a {
    color: #fff;
}