Using CSS Sprites?

Question

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

Arseni Mourzenko · Accepted Answer · 2010-12-04 23:27:15Z

6

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

answered Dec 4, 2010 at 23:27

Arseni Mourzenko

52.7k35 gold badges119 silver badges213 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Jake Over a year ago

haha, i spent so long looking at this. i hate it when it's so simple D:!

Arseni Mourzenko Over a year ago

@Jake: I also spent some time before noticing the missing dot. That's why I prefer writing one style per line: it's much easier then to notice the typos like this.

Collectives™ on Stack Overflow

Using CSS Sprites?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related