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