Tailwind 防止按钮边框悬停触发悬停事件答案

【问题标题】：Tailwind prevent button border hovering from triggering the hover eventTailwind 防止按钮边框悬停触发悬停事件
【发布时间】：2022-01-09 14:31:25
【问题描述】：

我目前的一个项目遇到了一个奇怪的问题

当我将鼠标悬停在按钮上时，我试图让按钮更改其颜色，并更改按钮内的文本颜色

这非常有效，直到我将鼠标悬停在触发整个按钮的悬停事件而不是其中的文本的边框按钮上

<a class="min-w-full lg:min-w-[0px]" target="_blank" href="https://stackoverflow.com">
        <button
            type="button"
            class="border-4 border-github rounded-[12px] min-w-full lg:min-w-[0px] mx-1 mb-4 lg:mb-2 py-2 hover:bg-github transition duration-200 ease-in-out">
            <span
                class="w-full h-full select-none text-github text-2xl lg:text-3xl lg:px-
         [6.625rem] font-semibold hover:text-background transition duration-100">   
        check this out
       </span>
    </button>
</a>

如何让按钮的边框不触发悬停事件？

或者还有其他更好的方法来做我想做的事情吗？

【问题讨论】：

标签： html css tailwind-css

【解决方案1】：

group-hover

https://tailwindcss.com/docs/hover-focus-and-other-states#styling-based-on-parent-state

试试这个：

<a class="min-w-full lg:min-w-[0px]" target="_blank" href="https://stackoverflow.com">
  <button type="button" class="group border-4 border-github rounded-[12px] min-w-full lg:min-w-[0px] mx-1 mb-4 lg:mb-2 py-2 hover:bg-github transition duration-200 ease-in-out">
    <span class="w-full h-full select-none text-github text-2xl lg:text-3xl lg:px- [6.625rem] font-semibold group-hover:text-background transition duration-100"> check this out </span>
  </button>
</a>

【讨论】：