悬停时顺风向上增加高度

Question

我仅使用 Tailwind css 中可用的实用程序类构建了以下界面。悬停向下图标时，以下菜单会正确向下展开：

我的问题是向上图标。当它悬停时，它也会向下扩展 - 我希望它向上扩展，但我正在努力弄清楚如何这样做。这是我当前的实现（语法是 React/JSX）：

<div className="flex flex-col w-auto h-6 text-xl transition duration-300 transform transition-height hover:h-40 overflow-hidden ease-out">
  {colors.reverse().map((color) => (
    <div
      className={`text-${color}-400 w-6 h-6 rounded-full transform hover:cursor-pointer hover:bg-${color}-200 text-center`}
    >
      <FontAwesomeIcon icon={icon} />
    </div>
  ))}
</div>

除了向上扩展之外，我还希望它不要将前面的 div/content 进一步向上推，而是“覆盖”其内容。

Answer 1

我建议为此使用 scale。

尝试使用这些类 transform hover:scale-125