Tailwind CSS如何实现元素处于焦点状态时不触发hover悬停效果

实现方案 #

你可以通过以下两种常用方法实现需求，按需选择即可：

方法1：限制hover样式的生效条件 #

给hover修饰符叠加:not(:focus)和:not(:focus-within)伪类判断，只有当元素未处于焦点状态时，悬停样式才会生效，修改后的代码如下：

<div className='border border-gray-400 
                text-gray-600 
                hover:not(:focus):not(:focus-within):border-gray-600 
                focus:border-green-500 
                focus-within:border-green-500'>

方法2：提升焦点样式的优先级 #

如果使用的是Tailwind v3.2及以上版本，可以给焦点相关的样式加上!前缀开启!important权重，即使hover样式触发，也会被优先级更高的焦点样式覆盖：

<div className='border border-gray-400 
                text-gray-600 
                hover:border-gray-600 
                !focus:border-green-500 
                !focus-within:border-green-500'>

两种方法的区别在于：方法1是完全阻止hover样式在焦点状态下触发，方法2是hover样式仍会触发但会被焦点样式覆盖，视觉表现上都可以满足需求。

内容的提问来源于stack exchange，提问作者Eran