输入焦点时 Tailwind css 不显示悬停状态答案

【问题标题】：Tailwind css don't show hover state when input is in focus输入焦点时 Tailwind css 不显示悬停状态
【发布时间】：2021-09-13 04:55:59
【问题描述】：

在以下 div 上：

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

我希望当元素处于焦点状态时不会发生悬停状态。我怎样才能做到这一点？

谢谢！

【问题讨论】：

你能试试:not吗？我不是顺风 css 方面的专家
我可以添加它作为答案吗？你会投票吗？

标签： css reactjs tailwind-css

【解决方案1】：

使用 :not 像 hover(:not focus):border-gray-600 这样的 CSS 选择器

【讨论】：

【解决方案2】：

试试这个，border 需要定义宽度，所以在这个例子中，当它悬停时我只给出了 2。查看官方Doc

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

【讨论】：

不，悬停时仍然覆盖焦点样式
你能在这里登记吗？ play.tailwindcss.com/CiKlgdMI4W
我建议你使用单独的悬停和焦点，并将它们放在单独的 div 或元素中。

【解决方案3】：

export const FramelessInput = ({ name }) => {
const [focused, setFocused] = useState(false);
return (
    <div
        className={classNames(
            'w-[200px] rounded-sm border border-transparent text-gray-600  focus-within:border-green-500',
            !focused && 'hover:border-gray-600'
        )}
    >
        <input
            type="text"
            placeholder={name}
            onFocus={(e) => setFocused(true)}
            onBlur={(e) => setFocused(false)}
            className="block text-sm leading-4 font-sans p-3 h-10 focus:outline-none"
        />
    </div>
);

};

【讨论】：