html - Changing text color on hover using CSS -

html - Changing text color on hover using CSS -

i've searched couldn't find relating problem i'm having.

i have been trying work out ages can't seem it. have div has text , image in it. want text , background within div alter color when hover anywhere within div. have made text @ bottom changes, along background color, can't seem top text (h4) alter color.

it changes color when hover straight on h4 element not when hover anywhere within div.

the link below rough illustration of want achieve. there seperate styling on css of h4 tag can't create p rest. easiest way unfortunately must remain different.

this 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; } { text-decoration: none; }

is there way using css , not jquery/javascript? i'm new web development know html/css @ present.

thanks.

tom

jsfiddle link

you can use

class="lang-css prettyprint-override">#project1 h4 { color: inherit; }

to create inherit #project1's color.

demo

html css css3