Tailwindcss 使用悬停在 group-hover

Posted 2023-03-07

【中文标题】Tailwindcss 使用悬停在 group-hover

【英文标题】：Tailwindcss use hover over group-hover

【发布时间】：2021-03-18 01:48:01

【问题描述】：

我为一个元素添加了一个组悬停，但也为该元素添加了一个悬停。 group-hover 有效，但是当我将鼠标悬停在元素本身上时，背景颜色不会改变。

bg-green-500 group-hover:bg-green-200 hover:bg-green-500

【问题讨论】：

看起来这不可能。 group 悬停将优先于元素悬停。

【参考方案1】：

你需要像这样向你的父元素添加“组”类：

<div class="group">
   <div class="bg-green-500 group-hover:bg-green-200 hover:bg-green-500">
      <div class="hover:bg-green-500">
      CONTENT 1
      </div>
      <div>
      CONTENT 2
      </div>
   </div>
</div>

当您将组元素及其子元素（如上面的内容 2）悬停时，它会将背景更改为 green-200，并且当您将内容 1 悬停时，它也会将背景更改为 green-500

希望它有效:)

【参考方案2】：

现在可以使用Tailwind Just-in-Time mode，使用built-in important modifier：

<div className="group">
  <div className="opacity-0 group-hover:opacity-50 hover:!opacity-100">
    Note the magic of the exclamation point!
  </div>
</div>