マウスオーバーに関するmacha1990のブックマーク (1)

  • ロールオーバーをCSSで実現する

    #myButton a { display: block; overflow: hidden; height: 0px; width: 100px; background-image: url(img/tip007_1.jpg); padding-top: 30px; text-align: center; margin: 10px 50px; } #myButton a:hover { background-image: url(img/tip007_2.jpg); } 2行目:指定要素がブロックレベルで表示されるようにします 3行目:ボックスの範囲内に内容が入りきらない場合に、はみ出た部分を表示しないようにします 4行目:高さを 0px にします(これは後の指定で上余白を画像の高さ分取るためです) 5行目:画像の幅を指定します 6行目:背景画像を指定します 7行目:上余白を画像の高さに

    macha1990
    macha1990 2012/05/30
    JavascriptなしCSSでのロールオーバー実現。
  • 1