All Posts by Email, Once a Week

Media Temple logo

CSS-Tricks is brought to you in part by Media Temple, the web hosting that we both use and recommend.

Show text on :hover with CSS

  • Anonymous
    # 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:

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

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

You must be logged in to reply to this topic.

There's a whole bunch of content on CSS-Tricks.

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed