Javascript 反应-悬停效果隐藏div不'；行不通

我试图使用：hover in css在我将鼠标悬停在另一个div上时显示/隐藏其中一个div的显示，但由于某些原因，它不起作用。我让它在其他组件上工作，但由于某种原因，它在这个实例中不起作用。不知道我做错了什么。请让我知道我做错了什么，这样我就可以纠正我的错误

JSX

当

.container job

处于悬停状态时，您需要使用在

.delete container job

上应用样式

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

这有用吗？

.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;
    }

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