Question

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

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

Answer 1

一种方法是使用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财产的更多信息，请查看这个漂亮的小article。

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;
}

Fiddle

使用伪类选择器来改变内容？

2 个答案: