避免在悬停转换文本和背景颜色的不同更改速度
问题描述:
我有问题,我有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&destination=Frankfurt Main, Germany" target="_blank">
<i class="fa fa-map-marker" aria-hidden="true"></i>
Show on map
</a>
</div>
答
我得到的东西在this fiddle工作。有一对夫妇的烦恼:
- 你被转移了,从透明的
a
和i
元素,蓝色的background-color
- 你应该让他们透明。 -
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;
}
THX的调试帮助! – wittich
你敢打赌 - 这是一个我从未见过的有趣的错误。 – arbuthnott