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; 
}