<style type="text/css">  
        .container{
            border:1px solid red;
        }
        .wrap{
            width: 100px;
            height: 100px;
            background: #6c0;
            transition:.4s ease-in-out;/*动画时间，移动效果，开始、结束都是慢速*/
        }
        /*
        鼠标移入移出
        没有+号，必须是父元素控制子元素
        +号表示一个元素控制兄弟元素
        */
        .container:hover +.wrap{
            transform: translateX(52px) ;
        }
    </style>

<div class="container"> 鼠标移入移出此框，下面绿色框会动画移动</div>
<div class="wrap"></div>

原文出处：/show_1C72FWVSgff.html