-3

私はボタンを作る昔ながらの方法から始めます。

<div id="button">
<a href="#"><img src="button.png"></a>
</div>

その後、誰かがボタンの上にマウスを置くと、画像が変わるはずですが、変わりません。関連するcssは

#button a:hover
{
    background-image: url('button2.png');
}

ここで何が問題になっていますか？マウスのホバーに反応してボタンの画像が変更されないのはなぜですか。

4

2 に答える 2

2

このようにしたい場合は、最初に背景画像を設定する必要があります。作成しているボタンには、実際にはimage背景画像ではなく実際のタグが含まれています。

考えられる回避策：button.pngをボタンの背景画像として次のように設定します。

#button a
{
    background-image: url('button.png');
    height: 20px; /* set to actual height of button image */
    width: 200px; /* set to actual width of button image */
}

次に、ホバー状態の場合は次のようにします。

#button a:hover
{
    background-image: url('button2.png');
}

（画像の寸法に設定）の高さと幅を設定することを忘れないでください#button a。そうしないと表示されません。

于 2012-09-19T17:00:24.297 に答える
1

コードを次のように変更する必要があります。

<div id="button">
<a href="#">&nbsp;</a>
</div>

そして、CSSでは：

#button
{
    width: /* image width goes here */px;
    height: /* image heightgoes here */px;
}
#button a
{
    display:block;
    background-image: url('button.png');
    text-decoration:none;
}
#button a:hover
{
    background-image: url('button2.png');
}

SEOの目的で、次の<a>ようなテキストを内部に書き込むこともできます。

<div id="button">
<a href="#">Title of the link</a>
</div>

次に、次のように非表示にします。

#button
{
    overflow:hidden;
    text-indent:-999px;
    width: /* image width goes here */px;
    height: /* image heightgoes here */px;
}

またはこのように：

#button
{
    overflow:hidden;
    width: /* image width goes here */px;
    height: /* image heightgoes here */px;
}
#button a
{
    ...other rules
    padding-left:/* a value higher than #button width */px;
}
于 2012-09-19T17:03:21.227 に答える