如何实现菜单栏鼠标悬浮动态效果？（CSS菜单栏美化Sprite+transition）

如何实现菜单栏鼠标悬浮过渡动态效果？

CSS实现菜单栏动态效果美化

CSS Sprite实现案例

CSS实现菜单栏hover事件动态切换图标状态（Sprite+transition）

Sprite特性：
CSS雪碧也叫做CSS精灵，是一种网页图片应用处理方式。它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去加载。
好处
可以减少图片的质量，网页的图片加载速度快
减少图片的请求的次数，加快网页的打开

Sprite使用示范（通过对图片区域（x,y）定位）：

方法一（-596px）：#box1{ width:20px; height:21px; background:url(./sprite_icon.png) no-repeat left -596px;}
方法二：background-position: x y;x向右为正, y向下为正

transition过渡：
transition-property : 规定设置过渡效果的CSS属性的名称。
transition-duration : 规定完成过渡效果需要多少秒或毫秒。
transition-delay : 定义过渡效果何时开始。
transition-timing-function : 规定速度效果的速度曲线。

菜单栏过渡效果案例：

效果图：

素材图片（Sprite图）：

代码（通过Sprite选择指定区域显示图片，transition实现过渡效果）：

    <style>
        ul,li{margin: 0;padding: 0;list-style: none;}
        ul{width: 360px;height: 70px;}
        ul li{width: 60px;height: 70px;float: left;background: url(./img/aNavBg.png);transition-duration: 0.5s;}
        ul li:nth-child(1){background-position: -0px -70px;}
        ul li:nth-child(2){background-position: -60px -70px;}
        ul li:nth-child(3){background-position: -120px -70px;}
        ul li:nth-child(4){background-position: -180px -70px;}
        ul li:nth-child(5){background-position: -240px -70px;}
        ul li:nth-child(6){background-position: -300px -70px;}

        ul li:nth-child(1):hover{background-position: -0px 0px;}
        ul li:nth-child(2):hover{background-position: -60px 0px;}
        ul li:nth-child(3):hover{background-position: -120px 0px;}
        ul li:nth-child(4):hover{background-position: -180px 0px;}
        ul li:nth-child(5):hover{background-position: -240px 0px;}
        ul li:nth-child(6):hover{background-position: -300px 0px;}       
    </style>

    <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>