避免在悬停转换文本和背景颜色的不同更改速度

Question

我有问题，我有hover效果不会呈现相同的更改文本colorbackground-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，并将其替换您的悬停CSS：

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

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