使用伪类选择器更改内容？

Question

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.

Answer 1

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 .

Answer 2

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