Html CSS：在悬停时替换文本，但平滑过渡到新文本不起作用？

场景：

如果用户将鼠标悬停在文本（例如h1标记）上，则应将其更改为新文本。新文本应该流畅地出现

到目前为止我所做的：

我可以用“display:none”和“content:‘This is the new text’”-属性替换新文本。我的问题是，新文本不会平滑显示（不会淡入/过渡）。 我也尝试过使用不透明度，但它不会替换我的旧文本（相反，它只是消失，新文本出现在它旁边）

下面是一个示例和代码片段：

.my\u div{
背景色：红色；
}
.my_div:悬停{
背景颜色：绿色；
过渡：所有500ms的缓进缓出；
}
.my_div:悬停。标题范围{
显示：无；
}
.my_div:悬停。标题：之后{
内容：“出现一个空白文本”；
}

这是旧文本

好的，第一部分，您无法设置显示属性的动画，您需要解决这个问题。要做到这一点，我们回到我们可以设置动画的地方，不透明度和宽度/高度

对于您试图实现的目标，我将在

中使用两个跨距-每个文本版本使用一个跨距。因为跨距是内联元素，所以我们给它们

display:block

，这样我们可以更清晰地控制这些维度

.my\u div{
背景色：红色；
过渡：所有500ms的缓进缓出；
}
.my_div:悬停{
背景颜色：绿色；
}
h1{
溢出：隐藏；
}
.旧文本，
.新案文{
显示：块；
溢出：隐藏；
过渡：所有500ms的缓进缓出；
}
.旧文本{
高度：自动；
不透明度：1；
宽度：自动；
}
.新案文{
颜色：#fff；
身高：0；
不透明度：0；
宽度：0；
}
.my_div:hover.旧文本{
高度：0px；
不透明度：0；
宽度：0px；
}
.my_div:悬停。新文本{
高度：自动；
不透明度：1；
宽度：自动；
}

这是旧文本
出现一个空白文本！

这是一个非常简单的示例

（此隐藏片段使用伪元素，而不是visible的内部

div

）

div，div:after，div:before{
高度：100px；
宽度：100px；
位置：绝对位置；
字体大小：40px；
颜色：黑色
}
部门：之后{
内容：“新”；
不透明度：0；
}
部门：以前{
内容：“旧”；
不透明度：1；
}
div:after，div:before{
过渡：不透明度0.5s线性；
}
.wrap:悬停：在{
不透明度：0；
}
.wrap:悬停：之后{
不透明度：1；
}

---

这个问题已经得到了回答，但我认为最好的方法是使用伪元素。 它非常简单和干净。 但是：您将失去过渡效果

.MySpecialTag:before
{
内容：“旧文本”；
}
.MySpecialTag:悬停：之前
{
内容：“新文本”；
}

---

你有什么输出吗？正如你在代码片段中看到的那样，背景色平稳过渡，但文本立即“弹出”。文本应该慢慢淡入，就像背景改变颜色一样。谢谢，我喜欢这个优雅的解决方案。但是，如果您不想指定背景色（->则旧文本和新文本将重叠），则它将不起作用。您是否也有解决此问题的方法？是的，透明将是完美的@用户3385759已更新！太棒了，谢谢你。如果您不想指定背景颜色，这甚至是可行的：我认为这是一种比公认答案更好的方法。文本仍将在HTML中，而不是在CSS中，这样对搜索引擎优化更好。另外，原始文本是隐藏的，没有转换，我将

旧文本

元素转换更改为仅更改其不透明度，并将位置设置为绝对：

不透明度：0，位置：“绝对”

。因此，它现在可以双向工作。但是，如果我们使用伪元素，是否也可以将其转换/淡入新文本？这实际上是我的主要问题：）（我最初也使用了pseude元素，请参见我的代码片段）。**编辑**啊，你编辑了你的答案，呵呵。这不是一种简单的方式，因为

内容
属性不适用于
转换
。（这不是一个数值）@avrahamcool你走对了方向。。。我是根据你的回答说的：@LGSon就像我说的，
不容易
+从我这里得到1。