2008年05月11日

画像のロールオーバー

テキスト飛ばしをしない画像のロールオーバーの方法。

<li id="gazo"><a href="#" title=""><img src="./gazo01.jpg" width="300" height="150" alt="" /></a></li>

li#gazo {
    width: 300px;
    background-image: url(./gazo02.jpg);
    background-repeat: no-repeat;
}
li#gazo a {
    display: block;
    width: 300px;
    height: 150px;
}
li#gazo a:hover {
    background-color: transparent;
}
li#gazo a:hover img {
    visibility: hidden;
}


トラックバックURL

コメントする

名前:
URL:
  情報を記憶: 評価:  顔   星
 
 
 
Profile
しぇんしぇい
西野流呼吸法とソシアルダンスと海外ミステリをこよなく愛しているおいさんの Diaryです。
記事検索
過去記事
Recent Comments
訪問者数

    天気情報
    Google Sitemaps用XML自動生成ツール
    livedoor Readerに登録
    RSS
    livedoor Blog(ブログ)