Javascript 如何在悬停状态下更改卡中字体图标的颜色？

我有一个有很多引导卡的页面。当我在卡上悬停时，我希望图标颜色为白色而不是黑色。我尝试了不同的方法，但没有成功。我添加了一个类，如.fa calendar:hover，我尝试使用fa:hover，但没有成功

这是我的密码笔

---

更具体地说，您可以将鼠标悬停在类名上。您需要hover属性，然后添加类名

.wrap:hover .fa{
 color:#FFF;
}

---

如果希望悬停时所有图标的颜色相同，则可以使用类名

例如：

.wrap:hover .fa{
  color:red;
  }

否则您可以使用id，然后更改颜色

.wrap:hover #vol{
  color:red;
  }

---

这是因为您为.mbr icont设置了颜色

将鼠标悬停在每个框上时，获取：hover的主父元素是.wrap类。无法更改.mbr icont:hover的颜色，因为用户可能会将鼠标悬停在框的其他部分，例如文本、标题或页边距。。。。因此，必须为父元素设置悬停样式。换行方式如下所示：

.wrap:hover .mbr-iconfont {
  color: #FFF;
}

这是像这样的

？另见这个问题：

.mbr-iconfont {
  font-size: 4.5rem !important;
  color: #313131;
  margin: 1rem;
  padding-right: 1rem;
}

.wrap:hover .mbr-iconfont {
  color: #FFF;
}