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