2

我有一个应该显示几个按钮的 CSS 图像翻转。它使用一张图像用于“正常”模式，一张用于“悬停”模式，一张用于“活动”模式。这三个图像是一个大图像文件的一部分。我之前在另一个项目上实现过这个方法并且效果很好，但是对于这个项目，我似乎无法让翻转效果起作用。我的代码如下：

<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/... 背景路径更改为我保存它们的位置。检查您的图像路径/网址是否正确，并且您的图像在正确的位置具有正确的按钮背景。这些是我的图像。我的购买图片

工作演示

于 2012-10-27T15:20:41.073 回答