how can i create a div (in html) to hover state that changes its entire content on hover?

Question

I have a div tag and some <h1> & <p> text inside of it. Now i would like to change the colors of each of those texts respectively into different colors individually, when the cursor hovers over the div (any part of the div; let the div be a container of 500x500PX) ! how can i achieve this?

thank you.

Answer 1

.container p, .container h1 {
display: inline-block;
width: 500px;
height: 500px;
color: black;
}

.container:hover h1 {
color: red;
}

.container:hover p {
color: green;
}

Answer 2

https://code.sololearn.com/WyF3TuY3fH62/?ref=app