CODEWITHSUNDEEP
cssimage
user1779397
user1779397

Reputation: 35

css image rollover not working

I have a css image rollover that is supposed to display a couple of buttons. It uses one image for 'normal' mode, one for 'hover' mode and one for 'active' mode. The three images are part of one large image file. I have implemented this method before on a different project and it worked fine, but for this project I cant seem to get the rollover effect working. My code is below:

<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>

My CSS is below:

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;
}

I think the problem is to do with the nested div tags but I am not fully sure. Can somebody help please? Also, I apologize in advance if the code isnt formatted properly in this post.

Upvotes: 2

Views: 563

Answers (1)

Thanushka
Thanushka

Reputation: 227

Your code worked for me. The only this I changed to test in my local machine was the URL of CSS image backgrounds. I created 2 images with 2 button backgrounds each and saved each as sell.png and buy.png.. I changed the localhost/... background path in CSS to where I had saved them. Check if your image path / url is correct and your images has the correct button backgrounds in correct locations. These are my images. My Buy image

Working Demo

Upvotes: 1

Related Questions