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

Posted 2023-03-06

【中文标题】CSS：在悬停时替换文本，但平滑过渡到新文本不起作用？

【英文标题】：CSS: Replacing a text on hover, but smooth transition to the new text does not work?

【发布时间】：2016-01-08 13:14:27

【问题描述】：

场景：

如果用户将鼠标悬停在文本（例如 h1 标记）上，它应该会更改为新文本。新文本应该看起来很流畅。

到目前为止我做了什么：

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

这里是JSFiddle 和代码 sn-p：

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

【问题讨论】：

你有什么输出吗？

正如您在代码 sn-p 中看到的，背景颜色过渡平滑，但文本只是立即“弹出”。文本应该（慢慢地）淡入，就像背景改变它的颜色一样。

【参考方案1】：

好的，所以第一部分，您不能为 display 属性设置动画，您需要一个解决方法。为此，我们回退到我们可以设置动画、不透明度和宽度/高度的内容

对于您要完成的工作，我会在 <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>

【讨论】：

太棒了，谢谢。如果您不想指定背景颜色，这甚至可以工作：jsfiddle.net/89vjkbzf

我认为这是比接受的答案更好的方法。文本仍将采用 html 格式，而不是采用 CSS 格式，因此更适合 SEO。另外，原始文本被隐藏而没有过渡，我将old-text元素过渡更改为仅更改其不透明度并设置绝对位置：opacity: 0,position: 'absolute'。所以它现在双向工作

【参考方案2】：

这是一个非常简单的示例

（这个隐藏的sn-p使用伪元素代替可见的内部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>

【讨论】：

谢谢，我喜欢这个优雅的解决方案。但是，如果您不想指定背景颜色（-> 那么旧文本和新文本将重叠），它将不起作用。 jsfiddle.net/pq3x0qvc 。您是否也有解决此问题的方法？

是的，透明就完美了！

@user3385759 已更新！

【参考方案3】：

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

.MySpecialTag:before

    content: "The old text";

.MySpecialTag:hover:before

    content: "The new text";

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

【讨论】：

谢谢，但是如果我们使用伪元素，是否也可以转换/淡入新文本？这实际上是我的主要问题:)（我最初也使用了伪元素，请参阅我的代码 sn-p）。**编辑**啊，你编辑了你的答案，呵呵。

不容易，因为content 属性不适用于transition。 （它不是数值）

@avrahamcool 你在正确的轨道上......我根据你的回答做了这个：jsfiddle.net/pq3x0qvc/2

@LGSon 就像我说的，not in an easy way... +1 来自我。