CODEWITHSUNDEEP
css
Rishiraj Surti
Rishiraj Surti

Reputation: 127

Using pseudo class selectors to change content?

How can I change the text which is contained in <p> tags by using CSS's pseudo class selectors?

For example, when I hover over a paragraph, the content of paragraph must change to what would be specified in p:hover selector.

Upvotes: 2

Views: 1579

Answers (2)

&#201;tienne Miret
&#201;tienne Miret

Reputation: 6650

Zenith has a simpler solution, but the following allows you to put formatting in your "hover" content. Try the following HTML:

<p>
  <span class="normalDisplay">Text to display <em>usually</em>.</span>
  <span class="hoverDisplay">Text to display on <em>hover</em>.</span>
</p>

and the following CSS:

p .hoverDisplay {
    display: none;
}
p .normalDisplay {
    display: inline;
}
p:hover .hoverDisplay {
    display: inline;
}
p:hover .normalDisplay {
    display: none;
}

Fiddle

Upvotes: 1

dsgriffin
dsgriffin

Reputation: 68596

jsFiddle.

One way is to use p:hover:before along with the content attribute.

Here's an example:

Html:

<p>
<span>First text!</span>
</p>

CSS:

p:hover span {
  display:none
}
p:hover:before {
  content:"Second text appears instead!";
  color:red;
}

If you'd like to know more about the content property, check out this nice little article.

Upvotes: 5

Related Questions