Welcome to Jonic Developer Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
1.1k views
in Technique[技术] by (71.8m points)

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

image
我把鼠标放在蓝色区域,蓝色区域上有一块绝对定位的元素,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>

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Answer

0 votes
by (71.8m points)

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


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome to Jonic Developer Community for programmer and developer-Open, Learning and Share
...