View Full Version : CSS rollovers

05-13-2010, 11:15 PM

The navigation bar ^^ up top (Home, Forum, Tutorials/Articles) was made using CSS. And there is 1 generic image that is repeating for each link.

The text is static, and it is not part of the rollover image.

great. now I have everything set up like that, but when the user goes and rollsover on the button, the button changes, but my mouse turns into a "I", over the text

That is because there is static text there, and it changes into an "I" (text cursor). Everything works, I just don't want the mouse to change into a text cursor. i want it to stay a pointer! haha

this is how i have it set up-

<a><li id = "button">Home</li></a>
<a><li id = "button">About</li></a>

and my CSS

#button {

width: 100px;
height: 40px;
display: block;
background-image: url("button.png");
color: white;
text-align: center;
padding-top: 10px;


#button:hover {

background-position: 0 50px;


#button:active {

background-position: 0 0px;


LOL sorry, easy question i feel stupid. :]

05-14-2010, 03:36 AM
I think if you put the link inside the list items it will take care of it:

<li id = "button"><a>Home</a></li>

Although you can also use the cursor: pointer; CSS property.

A couple things:

It's poor form to have more that one item on a page share an id. So you'd be better off using a class rule for button.

And usually you'd want to apply the style rule to the link tag rather than the li tag. That way, with the display: block property, the entire button will be a link (not just the text).

05-14-2010, 01:42 PM
It's easy when you think about it 8)
If it is a link, use the HREF attribute and the cursor will change automatically.
If it's not a link, do not use the A tag, but use CSS to change the cursor.