gpt4 book ai didi

CSS 过渡显示行内文本

转载 作者:太空宇宙 更新时间:2023-11-03 23:00:15 30 4
gpt4 key购买 nike

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

示例: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>

最佳答案

你找的是不是这样的

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>

关于CSS 过渡显示行内文本,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36800220/

30 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com