How to make text and image changes when rollover through CSS?

Question

I have a top menu with an icon - and below it there is text for the icon.

---------- ----------- | | | | | icon | | ? | ---------- ----------- Text Questions <li class="questions"> <a href="/questions" id="questions"> <i class="questions_icon"></i> Questions </a> </li> 

Using the sprite, I have an icon on: hover. I also have a text change in color to: hover.

However, I would like to know if this is possible:

• change the icon on hover - and
• change the text on hover.

Is it possible to use only CSS?

Answer 1

So something like this:

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

Answer 2

DEMO (no image): 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; }