CSS3::悬停前

Question

我有一个元素可以在点击时在不同的 font awesome 图标之间切换。我也希望在悬停时有这种效果。但它似乎并没有像我预期的那样工作。

演示 http://jsfiddle.net/JfGVE/1718/

工作正常

#heart-btn span.hearted::before {
  color: #c71616;
  content: '\f004';
}

没用

#heart-btn:hover span.hearted::before {
  color: #c71616;
  content: '\f004';
}

没用

#heart-btn span.hearted:hover::before {
  color: #c71616;
  content: '\f004';
}

Answer 1

将此 css 添加到您的 css 文件

#heart-btn span.not-hearted:hover:before {
  color: #c71616;
  content: '\f004';
}

请参阅此 fiddle :http://jsfiddle.net/JfGVE/1720/