CSS: 悬停时替换文本，但无法平滑过渡到新文本？

Question

场景：

如果用户将鼠标悬停在文本（例如 h1 标签）上，它应该更改为新文本。新文本应该能顺利显示。

到目前为止我做了什么：

我能够用 "display:none" 和 "content: 'This is the new text' "-属性的新文本替换文本。我的问题是新文本显示不流畅（不褪色in/transitions）。我也试过使用不透明度，但它不会替换我的旧文本（相反它只是消失，新文本出现在它旁边）。

这是一个 JSFiddle 和代码片段：

.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>

Answer 1

好的，第一部分，你不能动画显示属性，你需要一个解决方法。为此，我们回到可以设置动画的不透明度和 width/height

对于您要实现的目标，我会在 <h1> 中使用两个跨度 - 每个文本版本一个。由于 span 是内联元素，我们给它们 display: block 所以我们可以更干净地控制那里的尺寸。

.my_div {
  background-color: red;
  transition: all 500ms ease-in-out;
}
.my_div:hover {
  background-color: green;
}
h1 {
  overflow: hidden;
}
.old-text,
.new-text {
  display: block;
  overflow: hidden;
  transition: all 500ms ease-in-out;
}
.old-text {
  height: auto;
  opacity: 1;
  width: auto;
}
.new-text {
  color: #fff;
  height: 0;
  opacity: 0;
  width: 0;
}
.my_div:hover .old-text {
  height: 0px;
  opacity: 0;
  width: 0px;
}
.my_div:hover .new-text {
  height: auto;
  opacity: 1;
  width: auto;
}

<div class="my_div">
  <h1 class="title">
        <span class="old-text">This is the old text</span>
        <span class="new-text">A wild text appears!</span>
     </h1>
</div>

Answer 2

这是一个非常简单的示例

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

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>

Answer 3

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

.MySpecialTag:before
{
    content: "The old text";
}
.MySpecialTag:hover:before
{
    content: "The new text";
}

<h1 class="MySpecialTag"></h1>

CSS: 悬停时替换文本，但无法平滑过渡到新文本？

CSS: Replacing a text on hover, but smooth transition to the new text does not work?

html

css

hover

css-transitions