React- hover 隐藏 div 的效果不起作用

Question

I am trying to use:hover in css to show/hide the display of one of my divs when I hover over another div, but for some reason it's not working. I got it to work on other components but for some reason it's not working for this instance. Can't figure out what I did wrong. please let me know what I'm doing wrong so I can fix my mistake

JSX

render() {
    return (
        <div className='row'>
            <div className='container-job' onClick={this.test}>
                <div className='row'>
                    <div className='job-title'>
                        {this.props.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'>
                        {this.props.jobs_info.job_team.title}
                    </div>
                    <div className='location'>
                        {this.props.jobs_info.job_location.title}
                    </div>
                    <div className='type'>
                        {this.props.jobs_info.job_work_type.title}
                    </div>
                    <div className='creator'>
                        {this.props.jobs_info.user.name}
                    </div>
                </div>
            </div>
            <div
                className='counter-container'
                id='counter-container'
                onMouseEnter={this.changeBackground}
                onMouseLeave={this.changeBackground2}
            >
                Candidates <br />
                {this.props.jobs_info.candidates_count}
            </div>

            <div className='delete-container-job center'>
                <ion-icon id='trash' name='trash'></ion-icon>
            </div>
        </div>
    );
}

CSS

.jobs-card {
    height: 100%;
    width: 100%;

    .container-job {
        position: relative;
        height: 100px;
        width: 860px;
        background-color: rgb(37, 45, 73);
        border-radius: 10px;
        margin-left: 30px;
        margin-bottom: 20px;
    }

    .container-job:hover {
        .delete-container-job {
            display: block !important;
        }
    }

    .job-title {
        position: relative;
        color: white;
        font-size: 16px;
        margin-left: 40px;
        margin-top: 15px;
        margin-bottom: 10px;
    }

    .row .wrapper {
        margin-left: 25px;
    }
    .counter-container {
        position: relative;
        background-color: rgb(37, 45, 73);
        border-radius: 10px;
        width: 110px;
        height: 100px;
        margin-left: 20px;
        text-align: center;
        color: white;
        font-size: 15px;
        padding-top: 30px;
    }

    .delete-container-job {
        position: relative;
        background-image: linear-gradient(to right, #4639a7, #78019c);
        height: 100px;
        width: 50px;
        right: 180px;
        border-top-right-radius: 10px;
        border-bottom-right-radius: 10px;
        display: none;
    }

    #trash {
        font-size: 22px;
        color: white;
        display: inline-block;
        margin-top: 40px;
    }

    .center {
        text-align: center;
    }

Answer 1

You need to use general sibling combinator to apply a style on .delete-container-job when .container-job is hovered on.

.container-job:hover ~ .delete-container-job {
     display: block !important;
}