JavaScriptを使用しない2状態CSSのみのロールオーバー

Question

2状態のCSSロールオーバーを作成しようとしているため、ユーザーがボックスを転がすとボックスの色が変わり、別の画像が横に表示され、画像が消えてボックスが元の状態に戻ります。

私が働いているページはこちらです：

http://www.philippedollo.com/assign.htm

はJavaScriptをせずにこれを行うには任意の標準規格に準拠した方法はありますか？

Answer 1

以下は、CSSのリンクとホバープロパティを使用した簡単な例です。 spanを画像に置き換えて（float:leftを追加し、その順番を変更し、もう1つはspanに置き換えます）、.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; 
} 

また、あなたはこの動作を確認することができますhereのフィドル。

UPDATE：

リンク内spansが標準に準拠しているとして、Smirkinガーキンさんのコメントに基づいて、リンク内のspanタグにdivタグを変更しました。