悬停时更改字体真棒图标颜色

Question

我正在使用Font Awesome图标插件，但当我将鼠标悬停在<li>元素上时，我需要将其图标更改为color: blue。我测试过，但到目前为止没有得到任何结果。有人可以帮忙吗？

代码：

.collapsedMenu__item {
  width: 50px;
  height: 36px;
  margin: auto;
  background-color: green;
  list-style: none;
}
.collapsedMenu__item span {
  text-align: center;
  display: inline-block;
  width: 100%;
  height: 100%;
  padding-top: 10px;
}
.collapsedMenu__item a {
  color: #dad8de;
  height: 100%;
  display: block;
}
.collapsedMenu__item:hover {
  color: blue;
  background-color: #2ebd59;
  transition: color .25s, background .25s;
}
.promotionLink {
  box-shadow: 3px 0 0 #6441a4 inset;
}

<!--- Font Awesome -->
<link href = "//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css"
      rel = "stylesheet" type = "text/css"/>

<li class="collapsedMenu__item collapsedMenu--item">
  <a class="promotionLink" data-submenu="promotion" href="promotion">
    <span><i class="fa fa-laptop"></i></span>
  </a>
</li>

DEMO

Answer 1

您可以使用以下CSS代码：

/* To use a transition for 'color'. */
.collapsedMenu__item a {
   transition: color .25s;
}

.collapsedMenu__item:hover a {
  color: blue;
}

jsFiddle：→here。

<强>段：

＆＃13;

＆＃13;

/* ----- CSS ----- */

.collapsedMenu__item {
  width: 100px;
  height: 36px;
  margin: auto;
  background-color: green;
  list-style: none;
}
.collapsedMenu__item span {
  text-align: center;
  display: inline-block;
  width: 100%;
  height: 100%;
  padding-top: 10px;
}
.collapsedMenu__item a {
  color: #dad8de;
  height: 100%;
  display: block;
}
.collapsedMenu__item:hover {
  background-color: #2ebd59;
  transition: color .25s, background .25s;
}
.promotionLink {
  box-shadow: 3px 0 0 #6441a4 inset;
}
.collapsedMenu__item a {
  transition: color .25s;
}
.collapsedMenu__item:hover a {
  color: blue;
}

＆＃13;

<!----- HTML ----->
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css"
      rel="stylesheet" type="text/css"/>
<li class="collapsedMenu__item collapsedMenu--item">
  <a class="promotionLink" data-submenu="promotion" href="promotion">
    <span><i class="fa fa-laptop"></i>&nbsp;Laptop</span>
  </a>
</li>

＆＃13;

＆＃13;

＆＃13;

修改

要使其适用于 a 和 i ，请使用：

/* To use a transition for 'color'. */
.collapsedMenu__item a {
   transition: color .25s;
}

.collapsedMenu__item:hover a {
  color: blue;
}