Grow your CSS skills. Land your dream job.

Show text on :hover with CSS

  • # January 20, 2013 at 7:59 pm

    How can i display text inside a dive when its :hover? and when its not :hover the text hides again?

    # January 20, 2013 at 8:14 pm

    You could add a span inside the div with an id then use something like

    #some-element { display: none; }
    #some-div:hover #some-element { display: block; }

    See the CodePen example: http://codepen.io/ChrisUpjohn/pen/HBgiI

    # January 21, 2013 at 3:57 am

    If you want your text to be indexed by search bots, you might want to consider another hiding option than display: none;. Perhaps:

    .visuallyhidden {
    position: absolute;
    overflow: hidden;
    clip: rect(0 0 0 0);
    height: 1px; width: 1px;
    margin: -1px; padding: 0;
    border: 0;
    }

    More on this topic in this article: http://css-tricks.com/places-its-tempting-to-use-display-none-but-dont/

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".