React - Показать / скрыть при наведении курсора мыши с помощью хуков

Question

Я пытаюсь создать div для отображения / скрытия, когда моя мышь входит и выходит из контейнера. Я следовал этому примеру здесь (https://upmostly.com/tutorials/react-onhover-event-handling-with-examples), но у меня возникла проблема, когда я наводил указатель мыши на div 'delete-container', он исчезает. Эта проблема возникает из-за того, что он выполняет действие onMouseLeave. Есть ли способ исправить это или, возможно, улучшить свое решение? Вот демонстрация того, что происходит (https://i.gyazo.com/528d909625b6b3828325c4e62894d1c3.mp4).

import React, { useState } from 'react';
import axios from 'axios';

export default function JobInfo({ jobs_info }) {
    const [isShown, setIsShown] = useState(false);

    const changeBackground = (x) => {
        x.target.style.backgroundImage =
            'linear-gradient(to right, #4639a7, #78019c)';
    };

    const changeBackground2 = (x) => {
        x.target.style.background = 'rgb(37, 45, 73)';
    };

    return (
        <div className='row'>
            <div
                className='container'
                onMouseEnter={() => setIsShown(true)}
                onMouseLeave={() => setIsShown(false)}

            >
                <div className='row'>
                    <div className='job-title'>{jobs_info.title}</div>
                </div>
                <div className='row wrapper'>
                    <div className='category-title'>Category</div>
                    <div className='location-title'>Location</div>
                    <div className='type-title'>Type of Job</div>
                    <div className='creator-title'>Job Creator</div>
                </div>
                <div className='row wrapper'>
                    <div className='category'>{jobs_info.job_team.title}</div>
                    <div className='location'>
                        {jobs_info.job_location.title}
                    </div>
                    <div className='type'>{jobs_info.job_work_type.title}</div>
                    <div className='creator'>{jobs_info.user.name}</div>
                </div>
            </div>
            <div
                className='counter-container'
                id='counter-container'
                onMouseEnter={changeBackground}
                onMouseLeave={changeBackground2}
            >
                Candidates <br />
                {jobs_info.candidates_count}
            </div>
            {isShown && (
                <div className='delete-container center'>
                    <ion-icon id='trash' name='trash'></ion-icon>
                </div>
            )}
        </div>
    );
}

Answer 1

Проблема возникает из-за того, что delete-container находится за пределами иерархии container, и, следовательно, событие mouseleave запускается в контейнере. Визуализируйте delete-container как дочерний элемент контейнера и стилизуйте его соответствующим образом

return (
    <div className='row'>
        <div
            className='container'
            onMouseEnter={() => setIsShown(true)}
            onMouseLeave={() => setIsShown(false)}

        >
            <div className='row'>
                <div className='job-title'>{jobs_info.title}</div>
            </div>
            <div className='row wrapper'>
                <div className='category-title'>Category</div>
                <div className='location-title'>Location</div>
                <div className='type-title'>Type of Job</div>
                <div className='creator-title'>Job Creator</div>
            </div>
            <div className='row wrapper'>
                <div className='category'>{jobs_info.job_team.title}</div>
                <div className='location'>
                    {jobs_info.job_location.title}
                </div>
                <div className='type'>{jobs_info.job_work_type.title}</div>
                <div className='creator'>{jobs_info.user.name}</div>
            </div>
            {isShown && (
                <div className='delete-container center'>
                    <ion-icon id='trash' name='trash'></ion-icon>
                 </div>
            )}
        </div>
        <div
            className='counter-container'
            id='counter-container'
            onMouseEnter={changeBackground}
            onMouseLeave={changeBackground2}
        >
            Candidates <br />
            {jobs_info.candidates_count}
        </div>
    </div>
);

Однако вы можете просто использовать событие CSS hover, чтобы показать или скрыть delete-container without the need for state after rendering delete-container as a child of container`

.с css

.container {
    .delete-container {
        display: none;
        // other styles
    }
    &:hover {
        .delete-container {
           display: block;
        }
    }
    // other styles
}