最好用js，css3可以做。但兼容性有问题
这个你需要用到伪类 :hover
:hover 伪类在鼠标移到元素上时向此元素添加特殊的样式。
例子1
a:hover {color: #FF00FF}
延时文本
当鼠标移动到a标签上的时候，改变a标签的文激亮字颜色深入用法，当移动到某标签的时候改变其它标签的样式：
例子：
菜单
弹出菜单1
弹出菜单2
其实就这么简单，自己琢磨下吧，纯手打，！
以将 下拉菜单嵌入由盒子中 充当的按钮 为例来说明问题，以类选择器为button的盒子当作触发下拉菜单的容器(即是当鼠标移动到该按钮上面出现下拉框)，则必须将hover属性附着在按钮盒子的上一级盒子上，但是通常上一级的盒子比当前盒子大或者里面有多个小盒子，那么鼠标放在按钮外部和上一薯握态级盒子的内部仍然数源可以将下拉带单显示，于是尝试在按钮盒子的上一级加上了一个与按钮大小一样的按钮，并将下拉菜单附着于此。
第一想法就是给未显示（默认隐藏时）的下拉菜单栏添加，其结果就是边框一直处于显示状态，在下拉菜单栏隐藏时无法隐藏。解决方法就是将边框的皮则属性加在hover属性里面，未显示时的边框设置为零。
list中（隐藏时）的height设置为零，hover中（显示时）的height设置为110px，使用动画transition属性来过渡。
同样是通过overflow: hidden;实现隐藏，但是是通过visibility:visible;显示隐藏，动画效果仍然有效。
以上均为鄙人实践的结果，理解甚微，纰漏繁多，还请斧正。
比如说：下拉菜单收起时的动画没有搞明白怎样控制，而且下拉菜单收起时的动画没有边框；假如使用visibility: hidden;和visibility:visible;实现隐藏和显示时，会出现动画效果播放完之前，下拉菜单栏内容已经展示出来。