Changing text color on hover using CSS

Question

I've searched but couldn't find anything relating to this problem I'm having.

I have been trying to work this out for ages now but can't seem to do it. I have a div which has text and an image in it. I want all text and background within the div to change color when I hover anywhere within the div. I have made it so that the text at the bottom changes, along with the background color, but can't seem to get the top text (h4) to change color.

It changes color when I hover directly over the h4 element but not when I hover anywhere within the div.

The link below is a rough example of what I want to achieve. There is seperate styling on the CSS of the h4 tag so can't make it ap like the rest. That would be the easiest way to do this but unfortunately they must stay different.

This is my CSS style

.container {
    text-align: center;
}

.container h4 {
    text-align: center;
    color: black;
}

#project1 {
    text-align: center;
    color: white;
    background-color: white;
    background-color: rgba(255,255,255,0.9);
    color: black;
}

#project1:hover {
    background-color: blue;
    color: white;
}

#project1 h4:hover {
    color: white;
}

#project1 h4 {
    text-transform: uppercase;
}

a {
    text-decoration: none;
}

Is there any way to do this using CSS and not jquery/javascript? I'm new to Web Development so only know some HTML/CSS at present.

Thanks.

Tom

JSFIDDLE LINK

Answer 1

Change your CSS style from

#project1 h4:hover {
    color: white;
}

To

#project1:hover h4 {
    color: white;
}

JSFIDDLE DEMO

Answer 2

You can use

#project1 h4 {
    color: inherit;
}

to make it inherit #project1 's color.

Demo

Answer 3

You can nest h4 tag in p tag. no need for #project1 h4:hover in CSS .

Demo Fiddle