文本填充颜色CSS
问题描述:
我一直试图利用CSS,如下codepen.io/anon/pen/oYojzZ文本填充颜色CSS
但是左到右,而不是在文本填充来实现文本颜色填充用颜色填充背景。在这个例子中,文字颜色黑色应该变成粉红色而不是背景。
任何帮助,非常感谢。
感谢
答
.tooltiptext {
position: relative;
}
.popUpWord {
color: pink;
}
.popUpWordBlack {
color: black;
}
.outPop {
margin: auto;
background: none;
width: 0;
overflow: hidden;
display: block;
position: absolute;
/* Unset our animation play state initially - this will reset the animation when the hover is no longer */
animation-play-state: unset;
}
/* Since .outPop is hidden we add the style to either when the element is hovered or it's sibling is hovered */
.outPopBlack:hover + .outPop,
.outPop:hover{
/* Turn our animation on when we are hovering over our element */
animation: stripes 2s linear 1 forwards;
}
.outPopBlack {
display: block;
position: absolute;
z-index: -1;
}
@keyframes stripes {
to {
width: 32px;
}
}
<span class="tooltiptext">
<span class="outPopBlack">
<span class="popUpWordBlack">hello</span>
</span>
<span class="outPop">
<span class="popUpWord">hello</span>
</span>
</span>
谢谢!不过,我需要它启动悬停。将':hover'添加到'.tooltiptext'不起作用。 – Techs
@Techs动画现在开始悬停。请查看CSS中的注释以获取解释。 – Daerik
感谢您的详细解答!有没有办法将这个单词设置为悬停时的初始颜色(在这种情况下是黑色)? – Techs