CSSスプライトが出来ません！！

どこが間違っているのか、教えていただけませんでしょうか？
そして、これで、何でいけないのか、理解したいです。
まだまだ勉強中の者です、無礼かもしれませんが、宜しくお願い致します。

720px 490px の元画像（通常表示では上半分）を、ホバー時に下半分だけ表示したいのです。

<style type="text/css">
a.sprite{
background-image: url(###.jpg) no-repeat left top;
width:720px;
height:240px;
display: block;
overflow: hidden;
}

a.sprite :hover{
background-position:left bottom;
}
</style>

<a class="sprite" href="###"><img src="###.jpg"></a>