我希望当鼠标悬停在 "the wolf" 上时,文本 "Along came" 能够滑动显示。
但是,“the wolf”的位置不应改变。 "Along came" 应该从左侧滑入并淡入,以完成这句话。
.main {
width: 100vw;
text-align:center;
}
.addText {
display: none;
color: rgba(255,255,255,0);
transition: .5s;
}
.link:hover .addText {
display: inline;
color: red;
transform: translate(-10px, 00%);
}
<div class="main">
<div class="link">
<span class="addText">Along came </span>
the wolf
</div>
</div>
<div class="link">
设为内联元素,这样整行就不会对悬停产生反应了? - j08691