CODEWITHSUNDEEP
htmlcss
Albert MN.
Albert MN.

Reputation: 730

Show hidden text on hover (CSS)

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;}

Upvotes: 4

Views: 52919

Answers (2)

Hayden Schiff
Hayden Schiff

Reputation: 3330

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

Upvotes: 13

Ryan Rossiter
Ryan Rossiter

Reputation: 418

If you're okay with using JavaScript you could use:

var outDiv = document.getElementById('DivForHoverItem');
var inDiv = document.getElementById('HiddenText');

outDiv.onmouseover = function() {
     inDiv.style.display = 'inline';
};

outDiv.onmouseout = function() {
     inDiv.style.display = 'none';
};

Upvotes: -1

Related Questions