Changing font-color when hovering div - html

Question

I'm trying to make a div with text within it that is going to change whenever the user hovers over the div area, and not only the p tag. I am however not able to make my solution work.
JSfiddle
div{
height:200px;
width:400px;
background-color:#fbfb2b;
}
div:hover + p{
color:#fff;
}

Answer 1

Take away the + symbol in your css:
JSFiddle
CSS:
div{
height:200px;
width:400px;
background-color:#fbfb2b;
}
div:hover p{
color:#fff;
}
If you were looking for the selector which means direct descendant of div, you wanted >.
eg:
div:hover > p{
/*styles*/
}
Which would have worked for:
<div>
<p>Stuff</p>
</div>
But not
<div>
<span>
<p>Incorrect HTML example</p>
</span>
</div>
With your current CSS, you're trying to select the sibling.
If your HTML was like this:
<div></div>
<p>Some piece of text that is gonna change color when hovering the div</p>
the colour of p would have changed.
Ultimately however, with this specific HTML, you don't even need to include the p in the css and can just do div:hover, but if you're going to have other elements in it, then you should keep the p.

Answer 2

Take out the + P
div:hover {
color: #fff;
}

Answer 3

In your css you have used like this.
div:hover + p{
color:#fff;
}
It means you are applying the hover style for the siblings element not child element. In your case you need to remove + and add just space.
SIBLINGS ELEMENT PROVED HERE
div:hover p{
color:#fff;
}
CHILD ELEMENT PROVED HERE

Answer 4

there is no need to mention the <p> at all you can simply state the colour of all child elements by setting the style on the parent:
JSFiddle
div:hover {
color:#fff;
}
However if you did just want to target the paragraph text only you would use a > (child combinator) to target the P ONLY.

Answer 5

You must read rule about descendant selectors here.
If you need more info about selectors in css
Solved:
div:hover p{
color: #fff;
}

Answer 6

Your Css:
div:hover + p{
color:#fff;
}
+ selector select all <p> elements that are placed immediately after <div> elements.
Demo Fiddle With "+" selector
You can see, In the above fiddle div:hover + p select the outer <p> element, which are placed immediately after <div> elements.
But in your Case you do not need to use + selector. Because you want to select the child element of hovered div.
So, you should try this:
div:hover p{
color:#fff;
}
Working Example