如何通过CSS翻转翻转文本和图像？

Question

我有一个带有图标的顶级菜单 - 在它下面有图标的文字。

----------      -----------
|        |      |         |
|  icon  |      |    ?    |
----------      -----------
   Text          Questions

<li class="questions">
    <a href="/questions" id="questions">
    <i class="questions_icon"></i>
    Questions
    </a>
</li>

使用精灵我改变了图标：悬停。 我的文字颜色也有变化：悬停。

但是，我想知道是否可以：

• 在文本悬停时更改图标 - 和
• 在图标悬停时更改文本。

这是否可以单独使用CSS？

Answer 1

这样的事情：

.questions:hover i {
    background-image: url(...);
}
.questions:hover {
    color: red;
}

Answer 2

DEMO（无图像）：http://jsfiddle.net/kFkcV/

.container::after {
  content: "Hello World";
}

.container::before {
  content: /images/icon1.png;
}

.container:hover:after {
  content: "Hover World!";
}

.container:hover:before {
  content: /images/icon2.png;
}