2

いくつかのボタンを表示することになっているCSSイメージのロールオーバーがあります。「通常」モード用に 1 つの画像、「ホバー」モード用に 1 つ、「アクティブ」モード用に 1 つの画像を使用します。3 つの画像は、1 つの大きな画像ファイルの一部です。以前に別のプロジェクトでこの方法を実装したことがありますが、うまく機能しましたが、このプロジェクトではロールオーバー効果が機能していないようです。私のコードは以下の通りです：

<div class="homealertbox"><h1 class="homealert">The Worlds Best Marketplace For Buying & Selling Websites</h1>
<div class="addbuttons">
    <a href="http://localhost/buy" class="buy"><span class="displace">Buy</span></a>
    <a href="http://localhost/sell" class="sell"><span class="displace">Sell</span></a>
</div>

私のCSSは以下です：

a.buy {
display: block;
width: 160px;
height: 40px;
float:left;
background:url('http://localhost/img/buy.png');
background-position: 0 0;
}

a.buy:hover {
background:url('http://localhost/img/buy.png');
background-position:0 -40px;
}

a.buy:active {
background:url('http://localhost/img/buy.png');
background-position:0 -80px;
}

.displace {
position: absolute;
left: -5000px;
}

 a.sell {
display: block;
width: 160px;
height: 40px;
background: url('http://localhost/img/sell.png') 0 0 no-repeat;
float:right;
}

 a.sell:hover {
background: url('http://localhost/img/sell.png') 0 -40px no-repeat;
}

 a.sell:active {
background: url('http://localhost/img/sell.png') 0 -80px no-repeat;
}

問題はネストされた div タグに関係していると思いますが、完全にはわかりません。誰か助けてくれませんか？また、この投稿でコードが適切にフォーマットされていない場合は、事前にお詫び申し上げます。

4

1 に答える 1

1

あなたのコードは私のために働いた。ローカルマシンでテストするために変更したのは、CSS画像の背景のURLだけでした。それぞれ2つのボタンの背景を持つ2つの画像を作成し、それぞれをsell.pngとbuy.pngとして保存しました。CSSのlocalhost/...背景パスを保存した場所に変更しました。画像のパス/URLが正しく、画像のボタンの背景が正しい場所にあるかどうかを確認してください。これらは私の画像です。マイバイ画像

作業デモ

于 2012-10-27T15:20:41.073 に答える