jquery - 如何通过 CSS 在翻转时同时更改文本和图像？

Question

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

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

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

使用精灵我在 :hover 上更改了图标。我还在 :hover 上更改了文本的颜色。

但是，我想知道是否有可能：

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

这可以单独使用CSS吗？

Answer 1

所以是这样的：

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

Answer 2

演示（无图像）：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;
}

​</p>