Reposition my background on a mouse over

HTML & CSS
1

Hi,

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.

CSS:

body{margin:0; padding:0;}

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

#nav{background:#333333;
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?

HTML:

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=“http://www.w3.org/1999/xhtml”>

<html>
<title>TESTING</title>
<head>
<link href=“myCSS.css” rel=“stylesheet” type=“text/css” />

</head>

<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>
</ul>
</div>
</html>

What am I doing wrong?

2

You need to give the hover rule more specifity.

e.g.


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


background-image:url(buttons.gif);
3

It worked. Thanks a lot!

4

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

Thanks

5

Just add the id as necessary.

e.g.


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

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!

7

Hi,

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:

a:hover

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.

e.g.
a.test
or
a#test

Then you simply add the hover to it.

a.test:hover
or
a#test:hover

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.

8

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.

9

I know I know, its me again.

Why it works like this:

a#test:hover
or even without the a
#test:hover

but not with a space between a and #test:

a #test:hover

Thanks a lot!

10

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>

11

Thanks a lot!

12

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

13

Great! I got it.