避免在懸停轉換文本和背景顏色的不同更改速度

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