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

最近看到一篇文章：“Transition、Transform和Animation使用简介及应用展示”    ，想看看里面 “不同缓动类效果demo” 例子的效果，发现了一个问题如下：

.Trans_Box :hover （冒号前空格）这个伪类只能作用于 .trans_box中的子元素，鼠标移到自身时只能激发其子元素的样式发生改变。

<!--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);
}

刚刚学习CSS3，以上是调试所得心得，如有错误，欢迎大家批评指正。