How can i apply transition on hover on a div or stack ( chakra ui)

Question

Why transition is not applying on mouseenter and mouseleave.Stack is going up to -10px on mouse enter but transition is not working

here the code is:

 const Card = () => {
        
            const [isHovering, setHovering] = useState('')
        
            function handleMouseEnter() {
        
                setHovering(true)
        
            }
            function handleMouseLeave() {
        
                setHovering(false)
        
            }
        
        
            return (
        
                <Stack
                    style={{
                        position: 'relative',
                        top: 0,
                        top: isHovering ? '-10px' : '',
                        transition: isHovering ? 'top ease 0.5s' : ''
        
                    }}
                    onMouseEnter={handleMouseEnter} onMouseLeave={handleMouseLeave} >
</Stack>

    }

Answer 1

Because you remove transition on mouse leave transition: isHovering ? 'top ease 0.5s' : '', try this

style={{
    position: 'relative',
    top: isHovering ? '-10px' : '0px',
    transition: 'top ease 0.5s',
}}