'Tailwind css don't show hover state when input is in focus

On the following div:

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

I want the hover state not to happen when an element is an in-focus state. How can I make it so?

Thanks!

cssreactjstailwind-css


Solution 1:[1]

Use the css :not selector, e.g. hover(:not focus):border-gray-600

Solution 2:[2]

Try this, border need to define width, so in this example I gave just 2 when it hovered. check official 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'>

Solution 3:[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>
);

};

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Reggie Pinkham
Solution 2 JsWizard
Solution 3

Related Questions