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

Question

如何<p>使用 CSS 的伪类选择器更改标签中包含的文本？

例如，当我将鼠标悬停在段落上时，段落的内容必须更改为p:hover选择器中指定的内容。

Answer 1

js小提琴。

---

一种方法是p:hover:before与content属性一起使用。

这是一个例子：

html:

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

CSS：

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

如果您想了解更多关于该content物业的信息，请查看这篇不错的小文章。

Answer 2

Zenith 有一个更简单的解决方案，但以下允许您在“悬停”内容中设置格式。试试下面的 HTML：

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

和以下CSS：

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

小提琴