我有一个作为父代的div，它有一个背景图片和一个带有文本的子div。我希望我的子div不显示任何内容，当我将鼠标悬停在父div上时，子div现在是可见的。我该如何实现呢？
这是我的组件：

import React from 'react'

const Main = () => {
  return (
    <div className='container'>
        <div className="main_img sunglasses_container">
            <div className="cta cta_sunglasses">Sunglasses</div>
        </div>
        <div className="main_img perfumes_container">
            <div className="cta cta_perfumes">Perfumes</div>
        </div>
    </div>
  )
}

export default Main

这是我的风格：

/*Main container*/

.container{
   display: flex;
   width: 100%;
   height: 70vh;
   margin-top: 5px;
   padding: 10px;
   transition: 0.3s ease;
   align-items: center;
   justify-content: center;
}

.main_img{
   width: 100%;
   height: 100%;
   display: flex;
   justify-content: center;
   align-items: center;

}

.sunglasses_container{
   background-image: url("../images/sunglasses.png");
   background-repeat: no-repeat;
   background-size: cover;
   background-position: center;
   margin-right: 3px;
}

.sunglasses_container:hover,
.perfumes_container:hover{
   opacity: 0.5;
}

/* Target the cta div that comes after the hovered sunglasses_container div */
.sunglasses_container:hover ~ .cta_sunglasses{
   display: flex;
}

.perfumes_container{
   background-image: url("../images/perfumes.jpg");
   background-repeat: no-repeat;
   background-size: cover;
   background-position: center;
   margin-left: 3px;
}

/* Target the cta div that comes after the hovered perfumes_container div */
.perfumes_container:hover ~ .cta_perfumes{
   display: flex;
}

.cta{
   background-color: black;
   border-radius: 50%;
   height: 150px;
   width: 150px;
   display: none;
   position: absolute;
}

.cta_sunglasses, .cta_perfumes{
   display: flex;
   align-items: center;
   justify-content: center;
   color: white;
   font-size: 24px;
   display: none;
}

我尝试使用~操作符来定位子div，但它仍然不起作用。