.tooltiptext {
position: relative;
display: inline-block;
}
.tooltiptext:after {
content: "";
}
.popUpWord {
color: pink;
white-space: nowrap;
}
.popUpWordBlack {
color: black;
}
.outPop {
margin: auto;
background: none;
overflow: hidden;
display: block;
position: absolute;
animation-play-state: unset;
left: 0;
top: 0;
width:0;
}
.outPopBlack:hover + .outPop,
.outPop:hover {
animation: stripes 2s linear 1 forwards;
}
.outPopBlack {
display: block;
position: relative;
z-index: 0;
}
@keyframes stripes {
to {
width: 100%;
}
}
<span class="tooltiptext">
<span class="outPopBlack">
<span class="popUpWordBlack">hello World</span>
</span>
<span class="outPop">
<span class="popUpWord">hello World</span>
</span>
</span>
如果你没有使用多条线路,你可以用这个方法,
添加 “显示:inline-block的;” to tooltiptext
add white-space:nowrap; to .popUpWord,
改变.outPop的风格为 margin:auto; background:none; 溢出:隐藏; display:block; position:absolute; animation-play-state:unset; left:0; top:0; 宽度:0;
,你也可以在更短的代码中使用这些方法
.text {
position: relative;
display: inline-block;
z-index: 0;
}
.text:after {
content: "HEllo World";
position: absolute;
z-index: 1;
color: red;
left: 0;
top: 0;
width: 0;
white-space: nowrap;
overflow: hidden;
transition: 500ms linear all;
}
.text:hover:after {
width: 100%;
}
.text1 {
position: relative;
display: inline-block;
z-index: 0;
}
.text1>.dup {
content: "HEllo World";
position: absolute;
z-index: 1;
color: red;
left: 0;
top: 0;
width: 0;
white-space: nowrap;
overflow: hidden;
transition: 500ms linear all;
}
.text1:hover>.dup {
width: 100%;
}
<div class="text">
HEllo World
</div>
<br>
<br>
<div class="text1">
HEllo World
<span class="dup">HEllo World</span>
</div>
十分感谢!有没有一种方法可以显示从左到右的彩色文本,而没有两个重叠的跨度?当试图在DOM中查找元素时,它很复杂。 – Techs
是的..我刚刚在我的答案中添加了代码..请参阅 – Nandhu
我正在看代码。在你的例子中,它的工作原理是因为你在css的'content'属性中指定了覆盖文本。如果你使用不同的短语,这怎么办? – Techs