Reposition my background on a mouse over


I’m practicing css sprites and I was trying to re-position my background for all my links on a mouse over but it doesn’t work, here is the code I’m using.


body{margin:0; padding:0;}

#page-wrap{width: 600px; margin: auto;}

overflow: hidden; }

#nav li{ float: left; list-style-type: none;
padding: 10px 10px 10px 0; text-decoration:none; width:50px;}

#nav li a{text-indent: -999px; text-decoration:none; background: gray;
padding: 10px;
background-image: URL(“buttons.gif”);
display: block;

a:hover {background-position: -200px -100px;}

Shouldn’t this change the background position when mouse over the links?


<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “”>
<html xmlns=“”>

<link href=“myCSS.css” rel=“stylesheet” type=“text/css” />


<div id=“page-wrap”
<ul id=“nav”>
<li ><a id = “btn1” href=“/”>Home</a></li>
<li ><a id = “btn2” href=“/maps/”>Maps</a></li>
<li ><a id = “btn3” href=“/journal/”>Journal</a></li>
<li ><a id = “btn4” href=“/history/”>History</a></li>
<li ><a id = “btn5” href=“/references/”>References</a></li>
<li ><a id = “btn6” href=“/contact/”>Contact</a></li>

What am I doing wrong?

You need to give the hover rule more specifity.


#nav li a:hover {
    background-position: -200px -100px;

You are also missing the closing bracket here:

<div id="page-wrap"

I guess that’s just a typo when you pasted.

Why change the case here?

background-image: URL("buttons.gif"); 

Keep it lower case and no need for the quotes.


It worked. Thanks a lot!

Now, what if I want to reposition the background only for “btn1”?


Just add the id as necessary.


#nav li a#btn1:hover {
    background-position: -200px -100px;

You are awesome!

I would never thought that this should be like this “a#btn1:hover” #btn became part of a:hover. I little confused but I don’t want to be bothering you.

#nav li a#btn1:hover {
background-position: -200px -100px;

Thanks a lot!


I little confused but I don’t want to be bothering you.

Don’t get confused :slight_smile:

There’s nothing clever here. The :hover psuedo class is added to an element like so:


However all you are doing is adding :hover to the element concerned (the ‘a’ element). For example if the element has an id or class.


Then you simply add the hover to it.


If the target rule is ul#nav li a.current{}

Then to add a hover you just use the same rule with hover on the end.

ul#nav li a.current:hover{}

Note that Ie6 only understands hovers on anchors while other browsers allow other elements to have the pseudo class.

other browsers allow other elements to have the pseudo class

Thanks a lot! This was going to be my next question (Can I use the pseudo class for other elements other then “a”).

Very nice I got my answer, I appreciate it.

I know I know, its me again.

Why it works like this:

or even without the a

but not with a space between a and #test:

a #test:hover

Thanks a lot!

a#test means that “a” has an id of test on it in the html like…

<a href=“” id=“test”></a>

a #test with the space, means your targeting an element with the id of #test (in the html) that is nested in the “a”, otherwise known as a direct child of the parent like…

<a href=“”><b id=“test”></b></a>

Thanks a lot!

If you mean :hover then yes, however only IE6 will have support for anchor hovers :slight_smile:

Great! I got it.