Is it possible to do this with CSS?

HTML & CSS
1

I have a div in my design that is used for an image background (the area is 266 pixels wide by 166 tall) but within that same div is 2 more div’s that just have text within them. What I want to do is make that whole area a hit state so when you mouse over the text or anything within that area it is a hit state. I would also, if it is possible to do though CSS, would like to be able to change the color of the text when you rollover that whole area with your mouse to show you are interacting with that space. I know how to do link for text to do the hover etc, but in this case how would you set that up or is it really possible?

I could have done this with 2 images easily I know and swap them out on rollover with sprites, but I would rather the text be system text and also be easy to edit without being a full image.

If anyone can shed some light on this it would be awesome! Thanks!

2

I think you can add the hover pseudo class to a div element. Then when hovering, set your background-image to none, the background-color to whatever you want, and the color to whatever color you want the text to be.

color: red;, etc.

div:hover {
background-image: none;
color: red; /* Text color. */

}