CSSで画像置換のロールオーバー z-indexを使う方法

まずはデモ
http://css-eblog.com/eblog_sample/0912/dkir/

■Html
<p class="dkirBox para">
<a href="#" class="dkir"><span>HOME</span></a>
</p>

■CSS
.dkirBox {
 position: relative;
 z-index: 3;
 zoom: 1;
 }
 .dkir {
 background: url(button.png) left top no-repeat;
 display: block;
 text-decoration: none;
 width: 135px;
 height: 45px;
 }
 .dkir:hover {
 background-position: left bottom;
 }
 .dkir span {
 position: relative;
 z-index: -1;
 }

■画像
参考:これで決まり?な画像置換 - DKIR   
http://css-eblog.com/csstechnique/dkir.html
<p class=”dkirBox para”>
<a href=”#” class=”dkir”><span>HOME</span></a>
</p>

おすすめ

コメントを残す

メールアドレスが公開されることはありません。

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください