CSS：在悬停时替换文本，但无法顺利过渡到新文本吗？

问题描述

场景：

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

If a user hovers over a text (e.g. an h1-tag), it should change to a new text. The new text should appear smoothly.

我到目前为止所做的事情：

我能够替换具有新文本的文本，其内容为 display：none和 content：'This is the new text-属性。我的问题是新文本显示不流畅（不会淡入/过渡）。
我也尝试使用不透明度，但是它不能代替我的旧文本（相反，它会消失，而新文本会显示在其旁边）。

I was able to replace a text with a new one with the "display:none" and the "content: 'This is the new text' "-property. My problem is that the new text does not appear smoothly (it does not fade in/transitions).I've also tried to use opacity, but it doesn't replace my old text (instead it just disappears and the new text appears next to it).

这是一个和代码段：

.my_div {
  background-color: red;
}
.my_div:hover {
  background-color: green;
  transition: all 500ms ease-in-out;
}
.my_div:hover .title span {
  display: none;
}
.my_div:hover .title:after {
  content: "A wild text appears";
}

<div class="my_div">
  <h1 class="title"><span>This is the old text</span></h1>
</div>

推荐答案

这是一个非常简单的示例

Here is a really simple sample

（此隐藏的代码段使用伪元素，而不是可见的内部 div ））

(This hidden snippet use pseudo elements instead of the visible's inner div's)

div, div:after, div:before {
    height: 100px;
    width: 100px;
    position: absolute;
    font-size: 40px;
    color: black
}

div:after {
    content: "New";
    opacity: 0;
}
div:before {
    content: "Old";
    opacity: 1;
}

div:after, div:before {
    transition: opacity 0.5s linear;
}

.wrap:hover:before {
    opacity: 0;
}
.wrap:hover:after {
    opacity: 1;
}

<div class="wrap">
</div>

div {
    height: 100px;
    width: 100px;
    position: absolute;
    font-size: 40px;
    color: black
}

.new {
    opacity: 0;
}

.old, .new {
    transition: opacity 0.5s linear;
}

.wrap:hover .old {
    opacity: 0;
}
.wrap:hover .new {
    opacity: 1;
}

<div class="wrap">
<div class="new">New</div>
<div class="old">Old</div>
</div>

这篇关于CSS：在悬停时替换文本，但无法顺利过渡到新文本吗？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！