文本填充颜色CSS

Question

我一直试图利用CSS，如下codepen.io/anon/pen/oYojzZ

但是左到右，而不是在文本填充来实现文本颜色填充用颜色填充背景。在这个例子中，文字颜色黑色应该变成粉红色而不是背景。

任何帮助，非常感谢。

感谢

Answer 1

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