Two-state CSS-only rollover without JavaScript

I am trying to create a two-state CSS rollover, so when the user rolls over a box, the box changes color and another image appears to the side, and when they roll off the image to the side it disappears and the box reverts to the original state.

The page I am working on is here:

http://www.philippedollo.com/assign开发者_JAVA技巧.htm

Is there any standards-compliant way to do this without JavaScript?

Below is a quick example using a link and the hover property in CSS. You'll have to replace the .twoStateInner span with your image (and add float:left to it, changing the order of that and the other span to swap sides the image will apear on), and change the color as desired in your .twoState:hover CSS.

HTML:

<a class="twoState" href="javascript:void(0);">
    <span>text&nbsp;</span>
    <span class="twoStateInner">foo</span>
</a>

CSS:

.twoStateInner {
    display: none;
}

.twoState div {
    float: left;
}

.twoState:hover .twoStateInner {
    display: block;
}

.twoState:hover {
    color: red;
}

Also, here's a fiddle where you can see this in action.

UPDATE:

Changed div tags to span tags within the link based on Smirkin Gherkin's comment, as spans within links are standards compliant.