CODEWITHSUNDEEP
htmlcsshover
tomjoweb
tomjoweb

Reputation: 101

Changing child text color on hover of parent using CSS

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 separate styling on the CSS of the <h4> tag so can't make it a <p> like the rest.

.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;
}
<div class="container">
    <a href="PP 20062014 Creating This Website.html">
        <div id="project1">
            <h4>This Website</h4>
            <img src="https://www.google.com/images/srpr/logo11w.png" width="50%"</img><p></p>
                <p>My first ever website</p>
        </div>
    </a>
</div>

Is there any way to do this using CSS?

JSFIDDLE LINK

Upvotes: 7

Views: 160017

Answers (3)

netfreak30
netfreak30

Reputation: 316

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

Demo Fiddle

Upvotes: 2

Coder
Coder

Reputation: 7076

Change your CSS style from 

#project1 h4:hover {
    color: white;
}

To

#project1:hover h4 {
    color: white;
}

JSFIDDLE DEMO

Upvotes: 18

Oriol
Oriol

Reputation: 288690

You can use

#project1 h4 {
    color: inherit;
}

to make it inherit #project1's color.

Demo

Upvotes: 3

Related Questions