html - CSS 悬停过渡在 Firefox 上悬停时不会改变图标的​​颜色

Question

我在菜单中悬停时更改背景颜色和文本颜色 - 简单情况。在所有浏览器中，一切正常，但在 Firefox(普通版和开发人员版(58.0b1 版))中，当我将导航栏元素悬停几次时，取消悬停后的图标不会变回颜色并且它看起来像这样:
它应该是这样的:

.

---

HTML 元素:

<a href="#">
  <i class="fa fa-calendar-check-o" aria-hidden="true"></i>&nbsp; Plan dnia
</a>

之前的 CSS:

.navbar-default .navbar-nav>li>a {
  color: #314461;
  border-radius: 15px;
}

之后的 CSS:

.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
    background-color: #4D87EA;
    color: white;
    transition: 0.3s;
}

我想强调的是，当我从上面的 css 中删除过渡时，一切正常。

Answer 1

尝试像这样在 i 元素中添加你的应用:

.navbar-default .navbar-nav > li > a:hover > i,
.navbar-default .navbar-nav > li > a:focus > i {
    background-color: #4D87EA;
    color: white;
    transition: 0.3s;
}