2 
<div id="navigation>
    <ul class="navlist">
        <li><img src="images/btn1.gif"/></li>
        <li><img src="images/btn2.gif"/></li>
        <li><img src="images/btn3.gif"/></li>
    </ul>
</div>

JSを使用せずに、リストのロールオーバー状態内でこれらの「ボタン」をどのように与えることができますか? 完全に白紙描いてます…

これらのリンクは画像でなければなりません。

4

3 に答える 3

3

:hover新しいブラウザー (基本的に IE6 を除くすべての要素でセレクターをサポートするブラウザー。ここを参照) をサポートしている場合は、HTML を変更すれば、CSS を使用してこれを行うことができます。imgタグを削除し、代わりに背景画像を使用する必要があります。

CSS (これは 2 つの画像を使用した単純な例です。高さと幅を設定する必要があります。多数の異なる画像がある場合は、それぞれに css クラスが必要です):

<style type="text/css">
    .navlist li { width: 32px; height: 32px; background-repeat: no-repeat; background-image: url('images/image1.gif'); }
    .navlist li:hover { background-image: url('images/image2.gif'); }
</style>

HTML:

<div id="navigation">
    <ul class="navlist">
        <li></li>
        <li></li>
        <li></li>
    </ul>
</div>
于 2010-06-17T01:28:45.740 に答える
2

これを行うには多くの方法があります。基本的に、ホーミングしたときに画面から 1 つの画像を移動します。または、ホバーしたときに互いの上にある 2 つの画像の z-index を変更したり、背景画像や表示オプションを使用して変更したりできます。

CSS は非常に単純なので、私は display オプションを使用することを好みます。

クラスで行われるため、必要なだけボタンを追加できます。

HTML と CSS を一緒に含むページのコードを次に示します。 IE で動作させるには、DOCTYPE 宣言が必要です。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/\xhtml1/DTD/xhtml1-strict.dtd">
    <head>
        <style type="text/css">
            a img {
                border:none;
            }
            ul {
                list-style-type: none;
            }
            img.defaultSt {
                display: inline;
            }
            img.hoverSt {
                display: none;
            }
            li:hover img.defaultSt {
                display: none;
            }
            li:hover img.hoverSt {
                display: inline;
            }
        </style>
    </head>
    <body>
        <div id="navigation">
            <ul class="navlist">
                <li>
                    <img class="defaultSt" src="http://mrg.bz/vh60HV" />
                    <img class="hoverSt" src="http://mrg.bz/CcDOmL" />
                </li>
            </ul>
        </div>
    </body>
</html>
于 2010-06-17T01:22:34.453 に答える
0

リンクのプライマリとして透明な画像を使用してみてから、css を使用して背景を変更することができます

<style type="text/css">
    a.img1, a.img1:link { background-image: url(images/btn1.gif); }
    a.img1:hover { background-image: url(images/btn1_over.gif); }

    a.img2, a.img2:link { background-image: url(images/btn2.gif); }
    a.img2:hover { background-image: url(images/btn2_over.gif); }

    a.img3, a.img3:link { background-image: url(images/btn3.gif); }
    a.img3:hover { background-image: url(images/btn3_over.gif); }
</style>

<div id="navigation>
    <ul class="navlist">
        <li><a class="img1" href=""><img src="images/transparent_image.gif" width="x" height="y"/></a></li>
        <li><a class="img2" href=""><img src="images/transparent_image.gif" width="x" height="y"/></a></li>
        <li><a class="img3" href=""><img src="images/transparent_image.gif" width="x" height="y"/></a></li>
    </ul>
</div>

問題の画像のサイズに注意する必要があります。

于 2010-06-17T01:23:23.370 に答える