Html 悬停属性如何在CSS中多次工作

如何使用hover属性更改字体awesome的颜色2次

。单篇文章{
宽度：100px；
高度：100px；
背景：灰色；
}
.我的链接{
颜色：白色；
}
.单贴：悬停.我的链接{
颜色：黑色；
}
.我的链接：悬停{
颜色：红色；
}

---

我假设您想直接将鼠标悬停在链接上，然后变为红色

.single-post:hover .my-link:hover {
  color: red;
}

片段

。单篇文章{
宽度：100px；
高度：100px；
}
.我的链接{
颜色：白色；
}
.单贴：悬停.我的链接{
颜色：黑色；
}
.single post:hover.我的链接：hover{
颜色：红色；
}

---

您可以像这样使用关键帧

。单篇文章{
宽度：100px；
高度：100px；
背景：灰色；
}
.我的链接{
颜色：白色；
}
.单贴：悬停.我的链接{
-webkit动画：彩色动画0.5s正常向前；
-moz动画：彩色动画0.5s正常向前；
-o-动画：彩色动画0.5s正常向前；
}
@-webkit关键帧彩色动画{
0%{颜色：白色；}
50%{颜色：黑色；}
100%{颜色：红色；}
}
/*标准语法*/
@彩色动画关键帧{
0%{颜色：白色；}
50%{颜色：黑色；}
100%{颜色：红色；}
}

更改

。我的链接：hover

到

。单贴：hover。我的链接：hover

简而言之，你不能。不是你想的那样。也许通过CSS转换，你可以实现接近你想要的东西。酷-可能还需要批准答案*谢谢这是如何处理黑色然后红色？我没有看到这种效果。OP想要在div上悬停（然后在悬停图标时更改颜色）-你可以从他们的代码中看出这是他们的意图。-老实说，由于OP接受了答案，这意味着问题的措辞不正确（即悬停两次）