css 鼠标hover块元素的蒙层的时候能不能改变下方的块元素样式？

Question

我把鼠标放在蓝色区域，蓝色区域上有一块绝对定位的元素，opacity为0，鼠标放上去，显示这个mask，mask的宽高比下面的蓝色块大， 这里我想要做到让下面的蓝色块跟着变大，反正就是想控制绝对定位元素下面的块的样式，可以改变文档结构，不使用js，能不能做到？

<div className={styles.Wrapper}>   //postion: relative
  <div key={index} className={styles.circle}>
    <div className={styles.titleText}>
      {item.name}
    </div>
  </div>

  <div className={styles.mask}> //position: absolute
    <div className={styles.shareArea}>
      <img src={share}  className={styles.share} />
      <img src={activeShare} className= {styles.activeShare}/>
    </div>
  </div>

</div>

Answer 1

类似这样
<div class="mask"></div>
<div class="next"></div>
.mask:hover+.next{...}