gpt4 book ai didi

css - 使用初始值时,过渡属性不起作用

转载 作者:太空宇宙 更新时间:2023-11-04 10:46:55 25 4
gpt4 key购买 nike

我想创建一些动画菜单,将鼠标悬停在图像上并查看它的描述,但出现了一些问题。

  • 动画在使用初始值时立即开始;
  • 位于图像下方的开始文本,而不是在右侧边。

这是我的代码:

body{
text-align:center;
}
div{
display:inline-block;
overflow:hidden;
width:80px;
height:80px;
transition:0.5s;
font-size:20px;
}
div:hover{
width:initial;
overflow:visible;
transition:2s;
background-color:black;
color:white;
}
img{
vertical-align:middle;
}
<body>
<div>
<span><img src="https://upload.wikimedia.org/wikipedia/commons/d/d9/Test.png"/> Some text</span>
</div>
<div>
<span><img src="https://upload.wikimedia.org/wikipedia/commons/d/d9/Test.png"/> Some text</span>
</div>
<div>
<span><img src="https://upload.wikimedia.org/wikipedia/commons/d/d9/Test.png"/> Some text</span>
</div>
</body>

最佳答案

initial 就像 auto...你不能转换到它。

您可以改用 max-width

还有。请注意,overflow 无法转换,因此您也会遇到该问题。

body{
text-align:center;
}
div{
display:inline-block;
overflow:hidden;
max-width:80px;
height:80px;
transition:0.5s;
font-size:20px;
}
div:hover{
max-width:100%;
overflow:visible;
transition:2s;
background-color:black;
color:white;
}
img{
vertical-align:middle;
}
<body>
<div>
<span><img src="https://upload.wikimedia.org/wikipedia/commons/d/d9/Test.png"/> Some text</span>
</div>
<div>
<span><img src="https://upload.wikimedia.org/wikipedia/commons/d/d9/Test.png"/> Some text</span>
</div>
<div>
<span><img src="https://upload.wikimedia.org/wikipedia/commons/d/d9/Test.png"/> Some text</span>
</div>
</body>

关于css - 使用初始值时,过渡属性不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35318064/

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