Question about CSS and Hover effect.

[definitive]

I've been messing around with CSS a bit, and thought up of an idea where if I have a two boxes (one on top of the other) and put a mouse over them, then they'd both change colors at the same time. The problem is that I don't really know how to do it without having to resort to using images. What I've tried was making a wrap (I named it .wrap), and inside it I placed .top and .bottom boxes. They are both different colors. Then I made a hover for each box with slightly lighter colors. This works, but the problem is that it only changes one box's color at a time, so if I hover over the top box, then it will change colors, but the bottom one remains the same. Does anyone know if it's possible to change both at the same time using just html and css (without resorting to images, javascript, etc.)?

Here's an image of what I'm trying to accomplish. The black border around each box simply shows .wrap as it houses both of the boxes. The green box is .top, and the grey box is .bottom. The box on the right is what I'd like to accomplish when the mouse is over it.

 

[smirking]

Easy. You don't need the bottom box. You put the #top box inside #wrap. In the ":hover" event, you change the color of both boxes.

<style>
#wrap {
   width: 150px;
   height: 400px;
   background-color: #ddd;
}

#wrap:hover {
   background-color: #eee;
}

#top {
   background-color: #33cc66;
   height:50px;
}

#top:hover {
   background-color: #ffff33;
}
</style>
<div id="wrap">
  <div id="top"></div>
</div>

 

[definitive]

That is close to what I'm trying to accomplish, but here's the thing - it only changes when you roll over the top box. What I'd like to get is this:

Have a label (text) in the top box, and an image and a 5pixel border on the bottom box. When I mouse over either of them, the color of the top box would change, and so would the border of the bottom box with a lighter color. The image color and the text would remain the same.

 

[john1620b]

I actually had to deal with this myself two days ago. smirking's solution is close, but not quite right. Try this:

<style>
#wrap {
   width: 150px;
   height: 400px;
   background-color: green;
}
#wrap:hover {
   background-color: blue;
}
#top {
   background-color: yellow;
   height: 50px;
}
#wrap:hover #top {
   background-color: red;
}
</style>
<div id="wrap">
  <div id="top"></div>
</div>

 

[definitive]

I actually had to deal with this myself two days ago. smirking's solution is close, but not quite right. Try this:

I just tried it, and it worked, but it's not what I'm trying to do. I want the top box to have a label, while the bottom will have a 5 pixel border all around with an image inside. Here's another example:

The top box is borderless, while the bottom has 5 pixel border on each side. When I put a mouse on any part of the box (top, bottom, or border), then the top box label changes colors, and so does the border. The image and the text remain the same.

EDIT: After a bit of test and trial I got it to work. Thanks again smirking and john for your help. I ended up creating a second box with a border, and then used #wrap:hover #bottom and changed the border colors in there. Everything is working correctly now.