Question

当我将鼠标悬停在另一个div上时，我试图在CSS中使用：hover来显示/隐藏我的一个div的显示，但是由于某些原因，它无法正常工作。我让它可以在其他组件上工作，但是由于某种原因，它不适用于此实例。无法弄清楚我做错了什么。请让我知道我在做什么错，以便我可以纠正错误

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

当.delete-container-job悬停在.container-job上时，您需要使用general sibling combinator在.container-job:hover ~ .delete-container-job { display: block !important; }上应用样式。

FileNotFound

反应悬停效果以隐藏div不起作用

1 个答案: