[bes]

<style>
li {
	width: 30px;
	height: 30px;
	float: left;
	background: red;
	border: 2px solid black;
	background-image: url(http://u.jimdo.com/www52/o/s2ba029df7f23bf1c/userlayout/img/arrows.png);
	transition: background-position 0.3s;
}

ul {
	list-style: none;
}
li:hover {
	background-position: -30px;
}
</style>
<ul>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
</ul>
</style>