Show hidden text on hover (CSS) [duplicate]

Question

I have tried for a while now to show some text on :hover, is anyone able to explain it for me?

I tried:

#DivForHoverItem:hover #HiddenText {
     display: block;}

without luck, sadly. This little piece is in every example I found.

I also failed to understand: https://css-tricks.com/forums/topic/show-text-on-hover-with-css/

I try to get <div id="DivForHoverItem"><p>Shown text</p></div>

<div id="HiddenText"><p>Hidden text</p></div>

CSS:

#HiddenText {
   display: none;
}

and the code line up there ^

#DivForHoverItem:hover #HiddenText {
     display: block;}

Answer 1

The #HiddenText element has to be inside the #DivForHoverItem element if you want to achieve this with CSS. Try something like this:

#DivForHoverItem {
    /*just so we can see it*/
    height: 50px;
    width: 300px;
    background-color: red;
}

#HiddenText {
    display: none;
}

#DivForHoverItem:hover #HiddenText {
    display:block;
}

<div id="DivForHoverItem">
  <div id="HiddenText"><p>Hidden text</p></div>
</div>

jsfiddle link for convenience