HTML/CSS : Highlighting a link on hover by changing background color

Factual Questions
1

This is probably pretty easy, but I’m having some trouble with the CSS in doing this. Probably best to look here and scroll over the numbers to get an idea of what I’m talking about here. It’s a simple setup, but I’m finding that describing it is not easy.

http://me.berkeley.edu/~rkamath/testnumbers.html

So, I’m making a website where items are being sold. There are categories, and each category has, say 50 items in it. When the user is looking through the items, he will see only 10 per page, so there will be multiple pages to scroll through.

At the bottom of each page, there will be a bunch of numbers indicating the page you are on, and the numbers of other pages that you can go to. The page number that you are on will not be a hyperlink, but all other pages will be. I want to make it so that unlinked text (the page you are on; number 1 in the example page linked to above) will be highlighted (different text color, different background color), and when you hover over the links, the links will highlight in the same way as the current page number does. Sounds simple, right? Two problems keep cropping up: First, each number is in a table cell that has a cellpadding of 5px, and when I tell it to change the background-color of a linked item on hover, it only changes the area directly behind the number, not the padding area. Secondly, if I tell the style sheet to have the background of the current page number (the default style of the class) to be different than the rest, the padding-areas of all the other cells become that color too despite my telling it on the a:link, a:active, a:visited, and a:hover pseudoclasses that the background-color on linked text should not be that highlight color.

Sorry, my description probably sucks, but hopefully the link will give you an understanding of what I’m getting at.

Thanks for any help. I’ve been going crazy trying to get this working.

2

Instead of table-cells, you might have better luck with a <ul> with display: inline. A cool example is here.

3

Time for some DHTML.



<td id=page1 style='background-color: red;' onMouseOver="document.getElementById('page1').style.backgroundcolor = 'yellow';" onMouseOut="document.getElementById('page1').style.backgroundcolor = 'red';">

Make one of those for each cell, giving it a unique ID.

You can also make a JS func to do that (onMouseOut=“goRed(‘page1’);” onMouseOver=“goRed(‘page1’);”) and can also make a red and yellow class to use.

4

Thanks for the great answers! I got it to work! :smiley: