使用 tailwind 将鼠标悬停在特定子元素上时在父元素上应用样式

Question

我有这样的事情：

<main id="parent" class="h-screen flex justify-center items-center">
  
  <div id="child" class="bg-red-200 w-96 h-72 flex">
  </div>
  
</main>

当鼠标悬停在 上时，我将如何申请.bg-blue-100唯一的？#parent#child

group（我知道对父母和group-hover孩子使用可以达到相反的效果。）

Answer 1

您可以给父级pointer-events-none和子级pointer-events-auto，然后对父级应用hover:bg-100或任何悬停效果，并且它应该仅在子级悬停时触发。这是 Tailwind Play 上的示例https://play.tai​​lwindcss.com/W4C3J3tW6E

<main id="parent" class="h-screen flex justify-center items-center
hover:bg-blue-100 pointer-events-none">
  <div id="child" class="bg-red-200 w-96 h-72 flex pointer-events-auto">
  </div>
</main>

Answer 2

如果您还想在孩子聚焦时设置父母的样式，只需添加

"focus-within:bg-indigo-500"

（显然用你的风格替换“bg-indigo-500”）

当每个孩子都发生这种情况或者您只有一个孩子时，这会起作用。