【コンテンツ】

CSSのみでロールオーバー(position,top)

a要素に背景を敷き、overflow:hiddenを指定。
img要素で通常時の画像を配置し、a:hover時にのみimg要素を画像の高さ分上にずらすことで(top:-32px)ロールオーバーを実現する手法です。
CSS ON、画像OFFでも情報が表示され(ロールオーバー時に消えますが・・)HTMLソースも汚れません。
(おそらく)検索エンジンスパムにはまずされないと思われる手法だと思っています。

Menu

CSSのみでロールオーバー(画像で覆う)

a要素内に空のspan要素を追加し、span要素を絶対配置(position: absolute;)にすることで、
通常の文字を画像(spanの背景)で覆い隠すタイプのロールオーバーです。
アクセシビリティの面でそれほど問題ないと思いますが(画像OFF、CSS ONでも問題なし)、
空のspan要素を追加するということで若干HTMLが汚れます。

CSSのみでロールオーバー(text-indent: -9999px)

a要素に背景を敷き、リンクテキストをtext-indentを十分に大きなマイナス値を指定することで画像のみを表示されるテクニックです。
検索エンジンスパムになるかも、と言われることもありますが、過剰な使い方をしなければスパムとして処理されることはないそうです。
これの問題点として、Firefoxなどではリンククリック時のアウトラインが画面外まで出てしまうことでしょうか。
さらに、画像OFF、CSS ONの状態だと情報が見れなくなる問題点もあります。

CSSのみでツールチップ


CSSのみでプルダウンメニュー(ポップアップメニュー)