Controlling the Hover State of Another Element
I've run into a situation where I need to use some CSS trickery. I'm not sure how to do it however.
I have a rectangular image that has a 2px wide border around it. The image is roughly 110px by 65 px. The border is black. When you rollover the image, the border turns another color (orange in this case). This is done by just having padding around the image and changing the background color of it when rolling over the image.
The tricky part however is that I have a separate div below it which also needs to control the color of the image when rolled over (it's a rectangular box with text in it). So on rollover, this text box needs to change from black to orange (similar to how the image does); and also change the image above it's color to orange.
Does that make sense? Any suggestions on how I would go about doing this?