Tailwindcss 使用悬停在组悬停上

Question

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

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

Answer 1

现在可以使用Tailwind Just-in-Time 模式，使用内置的 important 修饰符：

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

Answer 2

您需要将“group”类添加到您的父元素中，如下所示：

<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

希望它有效:)