CSSでロールオーバー1を使用したボタンの例

ロールオーバー1CSS
この例では、次のように機能する3つの画像が必要です。
安息

その上

開催

それから私たちのサイトの本文にはこれがあります
コード：


始まり

したがって、すべてのボタンについて、CSSを使用する必要が生じた後、次のコードから始めます。
コード：

＃bot1 {
境界線：0 0 0 0;
パディング：0;
text-align：center;
}
外側と内側の余白が必要ないと言う場合は、テキストを中央に揃えます。次に、次のコードを続けます。
コード：

＃bot1から{
背景画像：url（bg_menu_1.jpg）;
背景位置：センタートップ;
高さ：30px;
幅：100px;
表示ブロック;
色：＃990000;
テキスト装飾：なし;
パディングトップ：5px;
background-repeat：no-repeat;
フォントの太さ：太字;
}
彼が実質的にすべてを行う人であることを、行ごとに見てみましょう
背景画像：url（bg_menu_1.jpg）;
これで、背景画像が必要だと言い、これのパスを示します
背景位置：センタートップ;
これにより、背景画像の位置が中央に上向きになることを示しています。
background-repeat：no-repeat;
背景がパターンのように繰り返されないようにします。
高さ：30px;
幅：100;
高さは30、幅は背景画像のサイズである100pxになると彼に伝えます。
表示ブロック;
そのため、以前に設定したメジャーを使用してボックスを生成し、尊重します。
色：＃990000
これにより、ボックス内のテキストにのみ色を付けることができます。
テキスト装飾：なし;
リンクの下にある線を避けるためです。
パディングトップ：5px;
リンクの上部に5pxのスペースを節約するために、これにより位置がボックスの中央に下がります。
フォントの太さ：太字;
文字を太字にします
次に、疑似要素「ホバー」と「フォーカス」のクラスを追加する必要があります
コード：

＃bot1 a：ホバー{
背景画像：url（bg_menu_2.jpg）;
}
＃bot1 to：focus {
背景画像：url（bg_menu_3.jpg）;
}
しかし、私たちが気付いたように、私たちは探していた効果を達成するために背景画像のパスを変更しただけでした。
私たちのコード cssでのロールオーバーの例 下に示された：

コード：








始まり


また、画像を右クリックして名前を付けて保存すると、このページから画像をダウンロードできます。