CSS3学习笔记——伪类hover作用于子元素

<!--Html部分代码-->
<div id="hhh" class="Trans_Box">
    <div class="box linear">linear</div>
    <div class="box ease">ease</div>
    <div class="box easein">ease-in</div>
    <div class="box easeout">ease-out</div>
    <div class="box easeinout">ease-in-out</div>
</div>

/*CSS代码*/
.Trans_Box {
    background:#CCC;
}
.box {
    background:#09C;
    border:black 1px solid;
    font-size:150%;
    width:100px;
    height:100px;
    margin:10px 0;
    text-align:center;
}
.linear {
    transition: all 4s linear;
    -webkit-transition: all 4s linear;
    -moz-transition: all 4s linear;
}
.ease {
    transition:all 4s ease;
    -webkit-transition:all 4s ease;
}
.easein {
    transition:all 4s ease-in;
    -webkit-transition:all 4s ease-in;
}
.easeout {
    transition:all 4s ease-out;
    -webkit-transition:all 4s ease-out;
}
.easeinout {
    transition:all 4s ease-in-out;
    -webkit-transition:all 4s ease-in-out;
}
.Trans_Box :hover {
    margin-left:89%;
    background-color:#0CF;
    border-radius:25px;
    transform:rotate(360deg);
    -webkit-transform:rotate(360deg);
    -moz-transform:rotate(360deg);
}
    
.yyy :hover{  //在Trans_Box外层再加一个div,才能捕捉到它的hover操纵
    -webkit-transform:rotate(180deg);
}