una forma podría ser esta
<a href="#" class="r1"><li></li></a>
<a href="#" class="r2"><li></li></a>
.r1{background:url('images/noticiasbtu.png');}
.r1:hover{background:url('images/noticiasbtuhov.png');}
como consejo en lugar de cambiar la imagen haz una imagen que contenga los dos estados del botón y cambias su posición con background-position, así y no tendrás problemas al tener que esperar que se cargue
.r1{background:url('images/noticiasbtu.png'); background-position:0 0;}
.r1:hover{background-position:0 -100px;}
y como apunte extra, no conozco como será la página pero piensa si el div que envuelve a ul es realmente necesario ya que ul se puede comportar exactamente como div
<ul id="nav">