CSSで実現するスマートなロールオーバー

CSSで実現するスマートなロールオーバー 暇があればコーディングコンテストの作品を眺めているのですが、ほんと勉強になります。 長谷川賞を受信したComplexさんが行っていたロールーオーバーの手法が、JavasScriptも画像置換も使わずにと素敵だったので紹介します。 サンプルはボクの方でアレンジしていますので、オリジナルも合わせて参考にお願いします。 まずサンプルのXHTMLソース <ul> <li class="ajaBtn"><a href="/ajax/"><img src="ajax_a.gif" alt="ajax" /></a></li> <li class="amaBtn"><a href="/amazon/"><img src="amazon_a.gif" alt="amazon" /></a></li> <li class="cssBtn"><a href="/css

[omaerec]

ロールオーバー

[elrio]

背景にhover hover時にhidden

[toguo]

text-indent-9999とかしない方法

[webmarksjp]

これはすごい

[tohu_neko]

できなかった(´・ω・｀)。

[hiroponz]

使えるロールオーバーのテクニック

[k_ume75]

JavasScriptも画像置換も使わないロールオーバー

[picnicgraphic]

JavasScriptも画像置換も使わないロールオーバー。

[You-2u]

CSS, スマートなロールオーバー

[aratako0]

なぜか、コメント欄が荒れているが。この手法は、既にホップ本にも書かれている。画像置換のバリエーションの1つ。

[hiro_y]

「li要素の背景にロールオーバー時の画像を配置しておき、a要素にマウスがかかった際にimg要素のvisibilityをhiddenにして対応しています。」

[aquila2005]

cssで画像のロールオーバー

[retlet]

upをhtmlのimg、overをcssのbackgroundで指定して a:hover img {visibility:hidden;} してる。面白いなぁと思うけどhtmlとcssに分散しちゃってるから管理めんどい気が。

[jamg]

これは…。

[sakadon]

自称WEBクリエイターちゃんの低脳披露☆　ほどほどにすればいいのに

[usj12262]

IE6だとマウスに無反応