Question

I have a top menu that has an icon – and underneath it there’s text for the icon.

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

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

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

However, I would l like to know if it’s possible to:

• change the icon when the text is hovered — and
• change the text when the icon is hovered.

Is this possible using CSS alone?

Answer 1

So something like this:

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