如何使用順風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.