css相关操作：
常用场景：
1. 给盒子加阴影
.operater-item:hover { box-shadow: 0 3px 7px 0 rgba(174, 174, 174, 0.5); }
2. 悬停显示文字
<div title="悬停显示的说明文字">悬停显示文字</div>
3. 悬停显示隐藏的子元素盒子
即hover同样可以对子元素进行样式操作
<div class="operater-item"> <div class="operater-icon">隐藏的子标签</div> 鼠标悬停在此部分会显示隐藏的子标签内容 </div>
.operater-icon { display: none; } .operater-item:hover .operater-icon { display: block; }
js鼠标悬停事件处理方式：
1.光标悬停是mouseover事件，光标离开是mouseout事件，
在html代码中就是设置onmouseover和onmouseout属性。例如下：
//假设a的样式已经明确
<span id=‘a‘ onmouseover="fc1(this)" onmouseout="fc2(this)"></span>
function fc1(node){ node.style.width = ‘200px‘; } function fc2(node){ node.style.width = ‘100px‘; }
暂时先总结这么多，路漫漫长矣~
原文：http://www.cnblogs.com/Janejxt/p/7491395.html