css
<style>
*{margin:0;padding:0;}
.box{width:200px;height:200px;background:red;position:fixed;top:200px;left:-200px;/*width宽度隐藏进去*/ transition:1s;}
.box span{position:absolute;width:20px;/*内容“”分享到撑开‘’*/border:1px solid #666;top:20px;left:200px;word-wrap:break-word;/*允许长单词换行*/}
.ac{left:0;}
</style>
js
顺序覆盖 ac在后面
同用className or 同用 classList
onmouseenter 稳定 span为div子集 会触发（冒泡 子集会触发父级）
<script>
var box = document.querySelector(".box");
box.onmouseenter = function() {
//.ac为动画完效果 .box有动画属性 tansition 添加ac属性
this.className = "box ac";//this === box
//OR
// this.classList.add = "ac";//classList 不会影响原本的样式 className会
}
box.onmouseleave = function() {
this.className = "box";
//OR
//this.classList.remove = "ac";
}
</script>
