a:hover funzt a:focus nicht

[SiDeu]

Habe es nun fast hinbekommen ohne java script !
Javascript ist blöde weil der browser dann immer nachfrägt ob mann es erleubt was dann viele gleich abschreckt!

also nun habe ich es so hinbekommen das ich einen div container mit einer bestimmten größe habe die 2 Bilder habe ich nebeneinander gelegt und eine Grafik draus gemacht, sie haben genau die doppelte Größe von meinem div Container. Die Grafik beginnt oben rechts ! Wenn ich nun mit der Maus drüber fahre verschiebt sich die Grafik einfach um die Hälfte nach rechts! Sie beginnt dann oben links
Leider funktioniert es nur mit a:hover und nicht mit a:focus !
Hat jemand eine Lösung?

<div id="div">
 <a href="Home.html" target="AnzeigeFenster" ><span></span></a>
</div>

#div {
    height:26px;
}
 
#div a {
  position: absolute;
  top: 13%;
  left: 4%;
  z-index: 5;
              
  height:26px;
  width:126px;
  margin:0;
  padding:0;
 
 
}
#div a span {
  height:26px;
  width:126px; 
  background:url(../Buttons/Home1+2.jpg) top right no-repeat;
}
 
 
 
#div a:hover span {
  background-position:top left;
}
 
 
#div a:focus span {
               background-position:top left;
}