#css# 【四】如何使用hover，实现父对子的样式改变？

#css#如何使用hover，实现父对子的样式改变？

思路及做法：
鼠标移动到父盒子的时候，
里面所有的子盒子的样式都发生变化的，
只需要直接在hover后面加上空格，
并且加上子盒子的类名 ,里面再写其他样式

.父盒子的类名:hover .子盒子的类名 {
//这里写鼠标移入到父盒子里面，子盒子要发生的样式变化
}

温馨提示，遇到父盒子里面的子盒子过多时，可以采取简写的形式：
以下为简写形式：

.父盒子的类名 {
     //父盒子的样式1;
     //父盒子的样式2;
     //父盒子的样式3;
     //父盒子的最后一个样式;
    &:hover {
      .子盒子的类名 {
         这里写鼠标进入父盒子以后，子盒子发生的样式变化  
            }
         }
    }

示例1：

//html
<div class="learn">
     <div class="learnbottom">
         <i class="iconfont" >我是子盒子1</i>
         <p>我是子盒子2</p>
     </div>
     <div class="learnstudy">
         <span>我是子盒子4</span>
     </div>
</div>

//css

.learn {
//自行写一些样式
}
.learn .learnbottom {
//自行写一些样式
}

.learn .learnbottom .iconfont{
//自行写一些样式
}

.learn .learnbottom .iconfont p {
//自行写一些样式

}

//以下开始写鼠标移入父盒子时，子盒子的样式发生改变
.learn：hover .learn .learnbottom {
    color: #DA1A14;
    cursor: pointer;
}
.learn：hover .learn .learnbottom .iconfont {
    color: #DA1A14;
    cursor: pointer;
}

.learn：hover .learn .learnbottom .iconfont p {
    color: #DA1A14;
    cursor: pointer;
}

示例2：简写形式
温馨提示，遇到父盒子里面的子盒子过多时，可以采取简写的形式：

<div class="btn">
    点击
    <i class="el-icon-sort"/>
</div>

.btn {
    background: #ccc;
    display: inline-block;
    padding: 8px 15px;
    cursor: pointer;
    &:hover {
        color: blue;
        i {
            color: red;
        }
    }
}

示例3：一个具体的例子
原型图：

需求：
当鼠标移动到卡片里面时（hover），
（父盒子）：卡片呈现阴影
（子盒子：）图片的悬浮放大、文字变成红色、按钮边框变成红色

代码如下：
html:

  <div class="join>
            <div class="learn-top" > //父盒子
                <div class="learn-top-sub">//以下为子盒子
                    <img :src="item.cover" :alt="item.title">
                </div>
                <h4 :title="item.title">{{item.title}}</h4>
                <div class="learn-bottom">
                    <i class="iconfont iconrenshu1"></i>
                    <p>{{ item.pv }}人学过</p>
                    <div class="study"><p>立即学习</p></div>
                </div>
            </div>
        </div>

css

.join .learn-top {
    position: relative;
    display: inline-block;
    vertical-align: top;
    width: 3.1rem;
    height: 3rem;
    background: #FFFFFF;
    box-shadow: 0 0 .2rem 0 rgba(206, 206, 206, 0.5);
    margin-right: .2rem;
    margin-bottom: .2rem;
    transition: all 0.9s;
    border-radius: .05rem .05rem 0 0 ;
    overflow: hidden;
}

.join .learn-top:hover {
    box-shadow: 0 .15rem .3rem rgba(0, 0, 0, 0.2);
/// box-shadow: 水平位置 垂直位置 模糊距离 阴影尺寸(影子大小)
//内外阴影inset，默认外阴影 /
//    transform: translateY(-.08rem); //向上浮动了8个像素
    cursor: pointer;
}

.join .learn-top:nth-child(4n) {
    margin-right:0;
}
.join .learn-top .learn-top-sub img {
    width: 100%;
    height: 100%;
    background-color: #666666;
    transform: scale(1.1); //原本的图片的大小，图片原来的大小不变
    transition: all 0.6s;
}
.learn-top-sub {
    width: 3.1rem;
    height: 1.75rem;
    background-color: #666666;
    overflow: hidden;
}

.join .learn-top:hover .learn-top-sub img  {
    transform: scale(1.2); 

}

//.learn-top img:hover {
//    cursor: pointer;
//}

.learn-top h4 {
    width: 2.75rem;
    height: .52rem;
    font-size: .18rem;
    font-weight: 400;
    color: #333333;
    line-height: .26rem;
    -webkit-line-clamp: 2;/** 显示的行数 **/
    overflow: hidden;
    margin: .18rem .18rem;
    font-family: SourceHanSansSC-Bold, SourceHanSansSC;
}

.join .learn-top:hover h4 {
    color: #DA1A14;
    cursor: pointer;
}

.learn-top .learn-bottom {
    position:absolute;
    left: 0;
    right: 0;
    bottom: .13rem;
    margin: auto;
    width: 2.75rem;
    height: .28rem;
}

.learn-top .learn-bottom i {
    float: left;
    line-height: .28rem;
    margin-right: .05rem;
}

.learn-top .learn-bottom p {
    float: left;
    width: .85rem;
    height: .2rem;
    font-size: .14rem;
    font-weight: 400;
    color: #999999;
    line-height: .28rem;
    font-family: SourceHanSansSC-Bold, SourceHanSansSC;

}
.learn-top .learn-bottom .study {
    float: right;
    width: 1.01rem;
    height: .28rem;
    border-radius: .23rem;
    border: .01rem solid #979797;
}

.join .learn-top:hover  .learn-bottom .study{
    cursor: pointer;
    color: #979797;
    border: .01rem solid  #DA1A14;
}

.learn-top .learn-bottom .study p {
    line-height: .28rem;
    text-align: center;
    padding-left: .08rem;
    color: #979797;
    font-family: SourceHanSansSC-Bold, SourceHanSansSC;
}

.join .learn-top:hover  .study p {
    color: #DA1A14;

}