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

效果展示如下：

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

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

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


 

    

      11
    
 



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