悬停时顺风向上增加高度答案

【问题标题】：Tailwind increase height upwards on hover悬停时顺风向上增加高度
【发布时间】：2021-01-17 13:14:13
【问题描述】：

我仅使用 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 进一步向上推，而是“覆盖”其内容。

【问题讨论】：

标签： css tailwind-css

【解决方案1】：

我建议为此使用scale。

试试这些课程transform hover:scale-125

【讨论】：