hover a box in CSS?

[Flashback10]

I am redesigning the following web site from one being made entirely in flash to a layer-based design (no tables): http://www.midoaklandmaintenance.com/

I want to somewhat keep the button design that I have on the site right now. In other words, I want a hover color on the entire box, like what I have on the index page.

Is there a way to do this in CSS? I've been looking it up everywhere, and I can't even find any sites that do this? All I can manage to do is change the hover color of the link itself, not the entire <div> box.

With the advancement of CSS, I can't imagine having these buttons be made from images...there has to be a better way.

Any help would be greatly appreciated. Thanks.

maria-

[fasterthanlight™]

Easy peasy

using an unordered list structure to house your text and links is the norm these days, then you can apply as many styles as you want to the list.

http://www.alistapart.com/articles/taminglists/


this will give you a solid overview, experiment a lot, its an easy effect!

[Flashback10]

Thank you for that tutorial. You're right, it looks easier than what I thought. However, I didn't try it yet. ;)

I notice that the list has the same color boxes...so, in order for each button to hover a different color, I would have to have 4 different "button" divs? Would this still be considered a list? Or could I name each <li> a class? That's the only part that I don't understand in the tutorial...

Thanks again for your help. I'll experiment with it more.

maria-

[fasterthanlight™]

Just give each li a class like so:



<ul id="navigation">
<li class="red">Item 1</li>
<li class="blue">Item 2</li>
</ul>

[ryan786]

I think if you make the <a> tag "display: block", then you can specify width and height, and then modify the a:hover css.

Maybe it would look something like the following


a {
display: block;
width: 100px;
height: 100px;
background-color: blue;
}

a:hover {
background-color: red;
}

[ryan786]

whoa, beaten to the post by a long time! I should check for replies first!