overflow: hidden以外使わない、スパムになりそうもない手法で、さらに無駄なタグを挿入せず、かつCSS OFF、画像OFFでもなんとか情報が消えないように工夫したCSSロールオーバーを作ってみました。
▼EntryMore▼
まずはソースの説明から。
【HTMLソース】
- <ul id="rolloverMenu">
- <li><a href="#" title="menu"><img src="btn.gif" alt="menu" /></a></li>
- </ul>
【CSSソース】
- #rolloverMenu li {
- margin-bottom: 3px;
- }
- #rolloverMenu li a {
- background: #00f url(btn_over.gif) left top no-repeat;
- color: #fff;
- display: block;
- position: relative;
- overflow: hidden;
- text-align: center;
- width: 88px;
- height: 32px;
- }
- #rolloverMenu li a:hover {
- background-color: #f73;
- color: #f00;
- }
- #rolloverMenu li a img {
- background-color: #00f;
- color: #f00;
- }
- #rolloverMenu li a:hover img {
- position: relative;
- top: -32px;
- }
概要を説明すると、普通にli要素でメニューを構築し、各メニューにはimg要素で画像を配置します。この際、alt属性にはしっかりとメニューの名前を設定します。（画像OFFの場合の対策）
次に、各メニューのa要素の背景にロールオーバーした際の画像を配置しておきます。
a要素はblock要素にし、画像と同じ幅・高さ、overflow: hiddenを設定します。
そして最後、a:hover imgにposition: relativeと、top: -32px（32pxはサンプルの画像の高さ。画像の高さが変わる場合は適宜変更してください）を設定したら完了です。
こうすることで、ロールオーバー時には画像が上にずれ、a要素の背景が表示されるため、
ロールオーバーの画像が表示されているように見える、というわけです。
検索エンジンスパムになる可能性のある隠し要素は（何もしない状態であれば）設定されておらず、かつロールオーバー用の無駄なタグの挿入もありません。
さらに、この方法はIE6でも問題なく動作します。
