Question

我有一个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标签有关，但我不完全确定。有人可以帮忙吗？另外，如果代码在这篇文章中没有正确格式化，我会提前道歉。

Answer 1

您的代码对我有用。我改为在本地机器上测试的唯一一个是CSS图像背景的URL。我创建了两个图像，每个图像有两个按钮背景，并保存为sell.png和buy.png ..我将CSS中的localhost / ...背景路径更改为我保存它们的位置。检查您的图像路径/网址是否正确，并且您的图片在正确的位置具有正确的按钮背景。这些是我的照片。 My Buy image

Working Demo

css图像翻转无法正常工作

1 个答案: