CSS Cell Rollover Effects

I was just wondering how I could get a whole cell to be a clickable hyperlink, and get the background to change color when you rollover it, with CSS.

I'd rather not use images for the links, since text is faster.

To help demonstrate what I mean, I uploaded the site template. The nav bar on the left that has a grey background... I want the background to change to white when you rollover it, and be able to click anywhere in the cell to activate the link.

#329091

off the top of my head you can try these two methods

1)

2) give your link an id(cell-link) or class and in css

display: block; width: 100%; height: 100%;

for changing the hover color thats easy, two choices once again.

1)

CSS .cell-link:hover { background: #f60; } <-- whatever you want

2) a.cell-link:hover { background: #f60 } <-- whatever you want

Hope that helps, try both methods.. hopefully one will work for you

If your new too css and standards compliant webdesign id use the first method

#329166

Why not use width and height by 100% for usual hyperlinks there? I make it this way oftenly.

#329438

off the top of my head you can try these two methods

1)

href='http://www.google.com';">sometext

2) give your link an id(cell-link) or class and in css

display: block; width: 100%; height: 100%;

for changing the hover color thats easy, two choices once again.

1)

href='http://www.google.com';">sometext

CSS .cell-link:hover { background: #f60; } <-- whatever you want

2) a.cell-link:hover { background: #f60 } <-- whatever you want

Hope that helps, try both methods.. hopefully one will work for you

If your new too css and standards compliant webdesign id use the first method

I'll give it a try, thanks.

Why not use width and height by 100% for usual hyperlinks there? I make it this way oftenly.

Don't know exactly what you're talking about. O.o

#329529

#336151