gpt4 book ai didi

javascript - Css 动画以在悬停时扩展按钮文本

转载 作者:数据小太阳 更新时间:2023-10-29 05:00:01 24 4
gpt4 key购买 nike

我想在鼠标悬停时在按钮上显示更多文本,并且我希望按钮随扩展文本缩小和增大。

我需要一个通用的解决方案,因为按钮上的文本及其宽度将取决于用户选择的语言。

这是我(目前没有工作)的尝试

.hover-value {
display: inline-block;
visibility: collapse;
width: 0%;
-webkit-transition: width 2s;
transition: width 2s;
overflow: hidden;
}
button:hover .hover-value {
visibility: visible;
width: 100%;
}
<button>
Result
<span class="hover-value">Add new result</span>
</button>

同样在 JsFiddle 上:https://jsfiddle.net/JohanGovers/46392xss/

我在我的元素中使用 jQuery 和 bootstrap,但如果可能的话我想用 css 解决这个问题。我试过按照其他 SO 答案中的建议使用可见性属性,但无济于事。

如有任何帮助,我们将不胜感激。

最佳答案

为了获得最好的动画,我决定为 max-width 属性设置动画。这是因为,目前您无法对 width:auto 进行动画处理。

(将 max-width:7rem 设置为大于文本长度的值。)

为了避免一堆对齐的 CSS,我使用了 display: inline-flex 因为这样可以完美地对齐它而无需使用 vertical-align 等等。 (如果这是一个问题,可以更改。)

然后我使用 white-space:nowrap 将所有文本强制排在一行上,使其动画效果更流畅。

button span {
max-width: 0;
-webkit-transition: max-width 1s;
transition: max-width 1s;
display: inline-block;
vertical-align: top;
white-space: nowrap;
overflow: hidden;
}
button:hover span {
max-width: 7rem;
}
<button id="btn">
Result
<span>New result</span>
</button>
<button id="btn">
Result
<span>Different text</span>
</button>

关于javascript - Css 动画以在悬停时扩展按钮文本,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33888214/

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