Changing BG Color Via CSS

Hey All,

How would I change the background of a "box" via CSS? This would in effect, act like a rollover, but without any JS. This is what I have right now:

#teamBox {
height: 50px;
width: 150px;
margin: 0px;
padding: 0px;
background-color: #000000;
}

#teamBox a:hover {
height: 50px;
width: 150px;
margin: 0px;
padding: 0px;
background-color: #ffffff;
}

<div id="teamBox">
<a href="#">text here</a>
</div>


This doesn't work. The "text here" link changes bg color, but I want the whole 150x50 pixel box to change color.

Any suggestions?

Thanks.

style the <a> with block-level display - apply all the styling to that and do without the <div>

Styling the "teamBox" <a> without the div? Won't this change all my <a> tags then? I only want this to happen in certain instances (one class for example) ..

If you want the div to change colour depending on whether it has a child in the :hover stage is impossible with CSS.

If you want a link to change colour on :hover, that's easy:a { background-color: #000; display: block }
a:hover { background-color: #fff }display:block means it can take widths and heights, vertical margins etc. Block level elements are generally much easier to work with than inline elements.

I basically want a blue box to act as a button (ie rollover). So I make the 150 x 50 px box via CSS and then put <a> tags around it. I want the bg color of the box to change color.

So you're saying this isn't doable? I've seen it before somewhere .. Just can't get it to work.

Thanks.

It's a 150x50px box. What's inside? An image? In which case:<a href="wherever.html" id="button">Text to sum up image</a>With some CSS:a#button {
display: block;
width: 150px;
height: 50px;
background: #fff url(image.gif) no-repeat; }
a#button:hover { background-color: #f00 }If there's no image, just replace background: #fff url(image.gif) no-repeat; with background-color: #fff.

That's what I'm looking for. Thanks.

But what if I wanted to throw a thumbnail image within the "box"? Then it's more than just setting properties for the <a> tag. .

.. the background image. I think you answered that already. :)

Oh yeah, also, if you don't want the text to show up when using background-image, use one of the many image replacement techniques. My favourites is:#replaced { background-image: url(blah.gif); text-index: -2000em }

I'm running into a slight snag .. Here's my code:

a#button {
display: block;
width: 300px;
height: 80px;
padding: 0 0 0 5px;
font-size: 12px;
color: #fff;
text-align: right;
text-decoration: none;
background: #A4493A url(images/header_teammates.gif) no-repeat;
}
a#button:hover { background-color: #CC3300; }


<a href="#" id="button"><br>eddie kraft<img src="images/spacer.gif" height="1" width="80" border="0" /></a>


So I have my box, with a thumbnail picture on the right side of it. I want to have text (2-3 rows) line up against the image. As you can see, I used a spacer gif (cringe) to move the text over, next to the thumbnail image.

However, if I want this to "work", I'll have to use the spacer gif on each row of text. There has to be a better way.

Any suggestions?

Try padding-right?

That extends the width of the whole box, and throws off the alignment of the image, so the box is now 300px + the padding.

Hmm ..

If you want 50px padding, set the width to 300 - 50 = 250px.

Through trial and error, I appeared to get it working via:

<a href="#" id="button"><br>row1 text<br>row2 text</a>

a#button {
display: block;
width: 230px;
height: 80px;
padding: 0 70px 0 0;
font-size: 12px;
color: #fff;
text-align: right;
text-decoration: none;
background: #A4493A url(images/header_teammates_eddie.gif) no-repeat;
}
a#button:hover { background-color: #CC3300; }

I guess that'll work. :)