Debug-025-鼠标悬浮hover在父元素上修改子元素样式

码农小白-RMS

已于 2024-09-02 14:06:31 修改

阅读量282

点赞数 4

文章标签： css 前端

于 2024-09-02 14:00:16 首次发布

本文链接：https://blog.csdn.net/LM0916/article/details/141817874

版权

效果展示如下：

鼠标移入父元素之后子元素修改样式

功能：实现一个鼠标hover悬停在父元素上，然后修改子元素的样式的效果：

//----------------html


 <div class="QQQQ">
    <div class="qqqq">
      11
    </div>
 </div>



//-----------------CSS


.QQQQ{
  width: 100px;
  height: 100px;
  background: aquamarine;

  .qqqq{
    width: 30px;
    height: 30px;
    background: rgb(220, 233, 186);
  }
}


//鼠标悬停在类名为QQQQ的父元素上，子元素qqqq显示的样式
.QQQQ:hover .qqqq {
  color: #fff;
  background: #4b88ff;
}