Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Show text on :hover with CSS

  • This topic is empty.
Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • #42141
    Anonymous
    Inactive

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

    #121654
    SgtLegend
    Member

    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

    #121695
    Kitty Giraudel
    Participant

    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: https://css-tricks.com/places-its-tempting-to-use-display-none-but-dont/

Viewing 3 posts - 1 through 3 (of 3 total)
  • The forum ‘CSS’ is closed to new topics and replies.