gpt4 book ai didi

html - CSS 过渡错误

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

对不起我糟糕的英语。我在 CSS 和过渡方面遇到了问题。

我需要制作一个 100px x 100px 的 div,这当然只是一个例子。

当我将光标悬停在它上面时,它应该会变大并变为 500px x 500px。

在这里,一切都很好并且可以正常工作。问题是,当我删除光标时,我需要 div 返回到 100x100px,但它不会有过渡,它只是消失并返回 100x100px。我该如何解决这个问题?

这是我使用的代码。

<html>
<head>
<style>
div.resize {
width: 100px;
height: 100px;
background: rgb(80,80,80);
}
div.resize:hover {
width: 500px;
height: 500px;
transition-duration: 1s;
}
</style>
</head>
<body>
<div class="resize"></div>
</body>
</html>

最佳答案

目前你说悬停时只能有动画。您希望动画在您离开元素后反转(您不再悬停),但这是不允许的,因为没有悬停的 div 没有设置动画。

只需将 transition-duration: 1s 放在 'div.resize' 而不是 'div.resize:hover' 上,它就固定了。

关于html - CSS 过渡错误,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43172385/

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