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

【问题标题】：Apply style on parent when hovering over a specific child element using tailwind使用顺风将鼠标悬停在特定子元素上时在父元素上应用样式
【发布时间】：2021-08-25 16:38:48
【问题描述】：

我有这样的事情：

<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>

只有将鼠标悬停在#child 上时，我将如何将.bg-blue-100 应用于#parent？

（我知道在父级上使用group 和在子级上使用group-hover 可以实现相反的效果。）

【问题讨论】：

标签： tailwind-css

【解决方案1】：

您可以给父级pointer-events-none 和子级pointer-events-auto，然后将hover:bg-100 或任何悬停效果应用于父级，它应该只在子级悬停时触发。这是 Tailwind Play 上的一个示例https://play.tailwindcss.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>

【讨论】：