есть 5 звезд

<a href="url1"><img src="star"></a>
<a href="url2"><img src="star"></a>
<a href="url3"><img src="star"></a>
<a href="url4"><img src="star"></a>
<a href="url5"><img src="star"></a>

Если сделать псевдокласс ховер, как бы так сделать, если наводишь на 3 звезду 1 и 2 тоже закрашивались, на 4 - 3,2,1 закрашивались и т.д.

На цсс.

если заморочиться со слоями, может получится.
По мне проще на java.

Никогда не понимал таких строгих правил Я бы на JS сделал в несколько строк.

_____________
Обучаю веб-программированию качественно и не дорого: http://school-php.com
Фрилансер, принимаю заказы: PHP, JS, AS (видео-чаты). Писать в ЛС (Личные сообщения на phpforum).

Проще всего, как тут говорили, на CSS, а именно через background.

Такие вещи лучше все же не делать на JS, и тем более на Java, если можно на CSS.
Мухи отдельно, котлеты отдельно.

Если еще актуально, скажи, сделаю завтра пример.

Нашел в инете, сделал по примеру. Все работает, хорошо, красиво.

.img a.rating1{
  left: 0;
}
.img a.rating1:hover {
  width: 20px;
}
.img a.rating2{
  left: 20px;
}
.img a.rating2:hover {
  width: 40px;
}
.img a.rating3{
  left: 40px;
}
.img a.rating3:hover {
  width: 60px;
}
.img a.rating4{
  left: 60px;
}
.img a.rating4:hover {
  width: 80px;
}
.img a.rating5{
  left: 80px;
}
.img a.rating5:hover {
  width: 100px;
}

.img ul{
  margin: 0;
  padding: 0;
  list-style: none;
  width: 100px;
  height: 19px;
  position: relative;
  background: url(/images/star.png);
}
.img li {
  float: left;
  margin: 0;
  padding: 0;
}

.img li a:hover {
  background: url(/images/stara.png) left center;
  left: 0;
  z-index: 2;
}
.img li a {
  display: block;
  width: 20px;
  height: 19px;
  position: absolute;
  text-decoration: none;
  z-index: 10;
}

Есть единственное но, при масштабировании(90%) видно чуть-чуть край 6 звезды т.к. стоит repeat. Встречал я это во многих готовых плагинах.