场景:
如果用户将鼠标悬停在文本(例如 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>
最佳答案
这是一个非常简单的例子
(这个隐藏的片段使用伪元素而不是可见的内部 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>
关于html - CSS:在悬停时替换文本,但无法平滑过渡到新文本?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33057737/