css - Tailwindcss - 如何在组悬停实用程序中添加上/下/右/左

Question

有<img>标签和 <button>标签在 div .使用 group在 div className和 group-hover:opacity-0在 img标签，它工作正常，但 group-hover:top-1/2在 <button>标签不起作用。

<div className="group relative bg-white">
<img
  src={restaurant}
  alt="A website image."
  className="group-hover:opacity-0"
/>
<button
  className="absolute -top-96 group-hover:top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2"
>
  LEARN MORE
</button>

我在 tailwind.config.js 上添加了给定的代码.

module.exports = {
  // ...
  variants: {
    extend: {
      top: ['group-hover'],
    }
  },
}

我该如何解决这个问题？？？？

Answer 1

更改 top在您的配置中添加到 inset如 docs说

You can control which variants are generated for the top, right, bottom, left, and inset utilities by modifying the inset property in the variants section of your tailwind.config.js file.

module.exports = {
  // ...
  variants: {
    extend: {
      inset: ['group-hover'],
    }
  },
}

注:如果您使用 Tailwind v2.1+ 和 mode: 'jit'它应该在不需要额外变体的情况下即时生成