CSS 设置精灵菜单链接的悬停状态示例-实例在线编辑器(oldtoolbag.com)

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS 设置精灵菜单链接的悬停状态示例</title>
<style>
    ul.menu {
        list-style-type: none;
    }
    ul.menu li {
        rejilla: 5px;
        fuente-tamaño: 16px;
        fuente-familia: "Trebuchet MS", Arial, sin serif-serif;
    }
    ul.menu li a {
        altura: 50px;
        línea-altura: 50px;
        mostrar: inline-bloque;
        rejilla-izquierda: 60px; /* Para separar el texto del fondo-image */
        color: #3E789F;
        background: url("/correr/images/mySprite.png") no-repetir; /* Como todos los enlaces comparten el mismo fondo-image */
    }
    ul.menu li.firefox a {
        background-position: 0 0;
    }
    ul.menu li.chrome a {
        background-position: 0 -100px;
    }
    ul.menu li.ie a {
        background-position: 0 -200px;
    }
    ul.menu li.safari a {
        background-position: 0 -300px;
    }
    ul.menu li.opera a {
        background-position: 0 -400px;
    }
    ul.menu li.firefox a:hover {
        background-position: 0 -50px;
    }
    ul.menu li.chrome a:hover {
        background-position: 0 -150px;
    }
    ul.menu li.ie a:hover {
        background-position: 0 -250px;
    }
    ul.menu li.safari a:hover {
        background-position: 0 -350px;
    }
    ul.menu li.opera a:hover {
        background-position: 0 -450px;
    }
</style>
</head>
<body>
	<ul class="menu">
        <li class="firefox"><a href="#">Firefox</a></li>
        <li class="chrome"><a href="#">Chrome</a></li>
        <li class="ie"><a href="#">Explorer</a></li>
        <li class="opera"><a href="#">Opera</a></li>
        <li class="safari"><a href="#">Safari</a></li>
    </ul>
</body>
</html>