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

Question

我遇到的问题是，我的hover效果不会像color更改那样对文字background-color进行相同的更改。

有没有办法避免这种不同的过渡行为？

这是一个实例：

＆＃13;

＆＃13;

* {
    -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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 1

我在this fiddle开始工作了。有几个麻烦：

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

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

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

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