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

Question

场景：

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

到目前为止我所做的：

我能够用带有“display:none”和“content:'This is the new text'”属性的新文本替换文本。 我的问题是新文本显示不流畅（它不会淡入/过渡）。 我也尝试使用不透明度，但它不会替换我的旧文本（相反，它只是消失了，新文本出现在它旁边）。

这是一个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

这是一个非常简单的示例

（这个隐藏的片段使用伪元素而不是可见的内部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 2

好的，所以第一部分，您不能为 display 属性设置动画，您需要一个变通方法。 为了做到这一点，我们回到我们可以设置动画的地方，不透明度和宽度/高度

对于您要完成的工作，我会在<h1>使用两个跨度 - 每个文本版本一个。 由于跨度是内联元素，我们给它们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 3

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

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

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