如何使用顺风css在悬停时更改div的宽度需要2秒
[英]how to make width change of a div on hover that takes 2 seconds with tailwind css
问题描述
我想在我的列上添加悬停效果，列的宽度会扩大。 我尝试了使用和不使用tailwind-css的以下代码。 当悬停在任何 div 上时，转换会立即发生。 我希望过渡至少需要 2 秒才能完成。 顺风 CSS 首选。 谢谢你。
<!doctype html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script src="https://cdn.tailwindcss.com"></script> <script> tailwind.config = { theme: { colors: { primary: '#5c6ac4', secondary: '#ecc94b', }, extend: { } } } </script> <style> .custom-css { transition: all; transition-duration: 2s; transition-timing-function: ease-in-out; } .custom-css:hover { width: 100%; } </style> </head> <body> <div class="flex column h-screen"> <div class="hover:w-full bg-primary transition-all duration-1000">hellow</div> <div class="hover:w-full bg-secondary transition-all duration-1000">hellow</div> <div class="hover:w-full bg-primary transition-all duration-1000">hellow</div> <div class="hover:w-full bg-secondary transition-all duration-1000">hellow</div> <div class="hover:w-full bg-primary transition-all duration-1000">hellow</div> </div> <div class="flex h-screen"> <div class="custom-css bg-primary ">hellow</div> <div class="custom-css bg-secondary ">hellow</div> <div class="custom-css bg-primary ">hellow</div> <div class="custom-css bg-secondary ">hellow</div> <div class="custom-css bg-primary ">hellow</div> </div> </body> </html>
1 个解决方案
解决方案1
1 已采纳 2022-06-23 14:42:14
要仅使用Tailwind来解决此问题，您需要flex-initial类和悬停效果增长类。 但是，如果您想将其用作自定义类，则应使用Tailwind实用程序包装类。
@layer utilities { .custom-css { flex: 0 1 auto; transition: all 2s ease-in-out; } .custom-css:hover { flex: 1 0 auto; } }
<script src="https://cdn.tailwindcss.com"></script> <div class="flex column h-screen"> <div class="flex-initial bg-primary transition-all duration-1000 hover:grow">hellow</div> <div class="flex-initial bg-secondary transition-all duration-1000 hover:grow">hellow</div> <div class="flex-initial bg-primary transition-all duration-1000 hover:grow">hellow</div> <div class="flex-initial bg-secondary transition-all duration-1000 hover:grow">hellow</div> <div class="flex-initial bg-primary transition-all duration-1000 hover:grow">hellow</div> </div> <div class="flex h-screen"> <div class="custom-css bg-primary">hellow</div> <div class="custom-css bg-secondary">hellow</div> <div class="custom-css bg-primary">hellow</div> <div class="custom-css bg-secondary">hellow</div> <div class="custom-css bg-primary">hellow</div> </div> <script> tailwind.config = { theme: { colors: { primary: '#5c6ac4', secondary: '#ecc94b', }, extend: {}, }, }; </script>
在：hover上显示隐藏的div，并使div在CSS / CSS3上移出鼠标后5秒钟保持可见
[英]Show hidden div on :hover, and make div stay visible for 5 seconds after mouseout on CSS / CSS3
（CSS）我如何使div在宽度上占用所有可用空间而没有特定值但是在同一个地方有另一个div具有特定值
[英](CSS) how I could make the div takes all available space in width without a specific value but there is another div in the same place with a specific
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.