Show hidden text on hover (CSS)

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 #HiddenTe         


        

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