主页 / coding / 问题

问题[hover](coding)

Martin Hope
GʀᴜᴍᴘʏCᴀᴛ
Asked: 2024-08-06 05:23:59 +0800 CST
  • 5

在 CSS 中我可以使用以下方法在悬停时展开：

a {
  --border-color: green;
  --border-width: 5px;
  --bottom-distance: 0px;
  
text-decoration:none;
background-position: 50% calc(100% - var(--bottom-distance));
  color: #666;
  display: inline-block;
  background-image: linear-gradient(var(--border-color), var(--border-color));
  background-size: 0% var(--border-width);
  background-repeat: no-repeat;
  transition: background-size 0.3s;
  margin: 5px 0;
}

a:hover {
  background-size: 100% var(--border-width);
}
<a href="#">Expand from center</h1><br/>

我一直在阅读以下文档：

<script src="https://cdn.tailwindcss.com/3.4.3"></script>

<a href="#" class="group text-sm">
Expand from center
<span class="block mt-4 max-w-0 group-hover:max-w-full transition-all duration-500 h-0.5 bg-green-600"></span>
</a>

如何在 Tailwind CSS 中将鼠标悬停在中心时展开？

hover