CODEWITHSUNDEEP
htmlcsssprite
Jake
Jake

Reputation: 1177

Using CSS Sprites?

I'm trying to do a navigation bar using css sprites. I have the image but it's just a matter of the code now. At the moment it is:

.navi a{
display:block;
float:left;
height:40px;
overflow:hidden;
background-position:left top;
}
navi a:hover img{
margin-top:-40px;
}

and the html is:

<div class="topbar">
<img alt="title" src="title.png"/><br/>
<div class="navi">
<a href="index.html" class="home"><img src="home_up.png"/></a>
</div>
</div>

All I have working is the normal image, the height is correct and it crops the rest of the image off, but when I hover it doesn't do anything. Any suggestions? Thank you

Upvotes: 0

Views: 262

Answers (1)

Arseni Mourzenko
Arseni Mourzenko

Reputation: 52371

Your first style is .navi a, but then you are writing: navi a:hover img. This means that the second style is applied to every image inside a hovered link which is inside <navi /> element, and not inside an element which has a classname navi.

So instead of:

navi a:hover img

you should write:

.navi a:hover img

Upvotes: 6

Related Questions