CSS过渡以显示内嵌文本

Question

文本如何与圆形内嵌并将其他颜色推到一边？

例子：Fiddle

<div id="a1"> 
    <span><a class="c1" href="1"></a></span><div class="blue">Blue</div> 
    <span><a class="c2" href="2"></a></span><div class="green">Green</div> 
    <span><a class="c3" href="3"></a></span> <div class="black">Black</div> 
    </div> 

Answer 1

是不是这样的，你找

a { 
 
    border-radius: 50px; 
 
    width: 25px; 
 
    height: 25px; 
 
    margin:3px; 
 
    display:inline-block; 
 
} 
 
.c1 { 
 
    background-color:blue; 
 
} 
 
.c2 { 
 
    background-color:green; 
 
} 
 
.c3 { 
 
    background-color:black; 
 
} 
 
.blue,.green,.black { 
 
    display:inline-block; 
 
    width: 0; 
 
    overflow: hidden; 
 
    transition: width 0.5s; 
 
} 
 
a:hover + div { 
 
    width: 50px; 
 
    transition: width 0.5s; 
 
}

<div id=""> 
 
    <a class="c1" href="1"></a> 
 
    <div class="blue">Blue</div> 
 
    <a class="c2" href="2"></a> 
 
    <div class="green">Green</div> 
 
    <a class="c3" href="3"></a> 
 
    <div class="black">Black</div> 
 
</div>