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

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

//html
<div class="learn">
     <div class="learnbottom">
         <i class="iconfont" >我是子盒子1</i>
         <p>我是子盒子2</p>
     <div class="learnstudy">
         <span>我是子盒子4</span>
//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"/>
.btn {
    background: #ccc;
    display: inline-block;
    padding: 8px 15px;
    cursor: pointer;
    &:hover {
        color: blue;
            color: red;
示例3：一个具体的例子
 原型图：
 
 需求：
 当鼠标移动到卡片里面时（hover），
 （父盒子）：卡片呈现阴影
 （子盒子：）图片的悬浮放大、文字变成红色、按钮边框变成红色
 
代码如下：
 html:
 
  <div class="join>
            <div class="learn-top" > //父盒子
                <div class="learn-top-sub">//以下为子盒子
                    <img :src="item.cover" :alt="item.title">
                <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>
.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;
                    #css#如何使用hover，实现父对子的样式改变？思路及做法：鼠标移动到父盒子的时候，里面所有的子盒子的样式都发生变化的，只需要直接在hover后面加上空格，并且加上子盒子的类名 ,里面再写其他样式.父盒子的类名:hover .子盒子的类名 {//这里写鼠标移入到父盒子里面，子盒子要发生的样式变化}温馨提示，遇到父盒子里面的子盒子过多时，可以采取简写的形式：以下为简写形式：.父盒子的类名 {     //父盒子的样式1;     //父盒子的样式2;     //父盒子
				
<p>在 CSS 中，可以使用下列语法在 :hover 时控制子项的显示和不显示:</p>
<p>父元素:hover 子元素 {
    display: none/block/inline/inline-block;
<p>例如：</p>
<style>
    .parent:hover .chil...
:hover 选择器用于选择鼠标指针浮动在上面的元素。
提示：:hover 选择器可用于所有元素，不只是链接。
注释：在 CSS 定义中，:hover 必须位于 :link 和 :visited 之后（如果存在的话），这样样式才能生效。
2、支持的浏览器：
3、:hover控制自身样式：
<div class="aa"></div>
<style>
	aa:hover { 
<meta http-equiv=”Content-Type” content=”text/html; charset=gb2312″>
<title></title>
<style type=”text/css”>
a:hover span{font-weight:bold;color:#F00}
</style>
</head>
<a>鼠标移过来看看这个网址是否变颜色：<span>www.jb51.net</span></a>
</body>
</html>
    提示：您可以先修改
				
由于hover伪类添加的动画效果，仅当鼠标放在元素上时会被触发，而当鼠标离开时，效果会中断，会显得很生硬。
大多数人的想法都是使用js的onmouseover和onmouseleave事件来实现动画效果。其实不必这么麻烦，CSS3便可以帮你解决这些问题。
 <!DOCTYPE html>
    <html lang="en">
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
				
可以使用 CSS 的兄弟选择器（sibling selector）或者后代选择器（descendant selector）来实现当一个元素 hover 后改变另一个元素的样式。
兄弟选择器：
```css
.element1:hover ~ .element2 {
  /* 样式 */
这个选择器表示当 `.element1` 元素被 hover 时，其后面的所有兄弟元素中类名为 `.element2` 的元素的样式将被改变。
后代选择器：
```css
.element1:hover .element2 {
  /* 样式 */
这个选择器表示当 `.element1` 元素被 hover 时，其中所有后代元素中类名为 `.element2` 的元素的样式将被改变。
需要注意的是，这两种选择器的使用需要考虑 HTML 结构和样式的继承关系，以免造成样式冲突或者不必要的样式继承。