jquery - ¿Cómo hacer que tanto el texto como la imagen cambien en rollover a través de CSS?

jquery selector

Question

Tengo un menú superior que tiene un ícono, y debajo hay texto para el ícono.

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

Utilizando un sprite tengo el ícono de cambiar en: flotar. También tengo el cambio de texto de color en: hover.

Sin embargo, me gustaría saber si es posible:

• cambie el ícono cuando el texto esté suspendido, y
• cambie el texto cuando el icono esté suspendido.

¿Es esto posible usar solo CSS?

Answer 1

DEMO (sin imágenes): 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;
}

1.

Answer 2

Entonces algo como esto:

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