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

Question

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

7

情境：

如果用户将鼠标悬停在文本上（例如一个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>

- OhDaeSu

你有任何输出结果吗？它应该是什么样子的？ - Krsna Kishore

正如您在代码片段中所看到的，背景颜色过渡平滑，但文本立即“弹出”。文本应该像背景改变颜色一样淡入（缓慢）。 - OhDaeSu

3个回答

6

好的，首先要说明的是，你无法通过动画效果来显示属性，需要采用一种替代方法。为了做到这一点，我们可以使用能够被动画效果控制的透明度和宽度/高度。

针对你想要实现的内容，我建议在 <h1> 标签内部使用两个 span 元素 - 分别代表两个文本版本。由于 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>

- Camwyn

太棒了，谢谢。即使您不想指定背景颜色，这也可以正常工作：https://jsfiddle.net/89vjkbzf/ - OhDaeSu

我认为这比被接受的答案更好。文本仍将保持在HTML中，而不是CSS中，因此更有利于SEO。此外，原始文本没有转换被隐藏，我将old-text元素的转换更改为仅更改其不透明度并设置为绝对位置：opacity: 0,position: 'absolute'。所以现在它可以双向工作。 - vgulkevic

1

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

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

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

- avrahamcool

谢谢，不过如果我们使用伪元素，是否也可以对其进行过渡/淡入新文本？这实际上是我的主要问题 :) （我最初也使用了伪元素，请参见我的代码片段）。编辑啊，你编辑了你的答案，呵呵。 - OhDaeSu

不是一件容易的事情，因为“content”属性与“transition”不兼容。（它不是一个数值） - avrahamcool

2

@avrahamcool 你走在了正确的道路上... 我根据你的答案制作了这个：https://jsfiddle.net/pq3x0qvc/2/ - Asons

就像我所说的，“不是一个简单的方法”... 我给你点赞。 - avrahamcool

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Asons · Accepted Answer

这是一个非常简单的样例

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