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

Question

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

我试图让一个按钮在我将鼠标悬停在它上面时改变它的颜色，同时改变按钮内文本的颜色

直到我将鼠标悬停在触发整个按钮的悬停事件而不是其中的文本的悬停事件的边框按钮上时，这才能正常工作

<a class="min-w-full lg:min-w-[0px]" target="_blank" href="https://whosebug.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>

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

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

Answer 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://whosebug.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>

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

Tailwind prevent button border hovering from triggering the hover event

html

css

tailwind-css