jquery onclick i nie działająca klasa :hover po kliknięciu

Witam, mam mały problem z poniższym kodem. Po jego uruchomieniu wszystko jest ok, tj. klasa :hover działa poprawnie. Jednak gdy klikne w któryś z div-ów, ten się podświetla, a wcześniej zaznaczony (kolor zielony) staje się nieaktywny (czerwony) jednak po takim kliknięciu klasa :hover przestaje działać. Proszę o pomoc z tym problemem.

Kod:

<script type="text/javascript">

$(document).ready(function()
{

  $("div").click(function()
  {
    $("div").css("background-color","red");

    $(this).css("background-color","green");
  });

});

</script>



<style>

div
{
  width:40px;
  height:40px;
  background-color:red
}

div:hover
{
  background-color:green
}

</style>





<div></div> <br/>
<div style="background-color:green"></div> <br/>
<div></div> <br/>
<div></div> <br/>
<div></div> <br/>
<div></div> <br/>
<div></div> <br/>
<div></div>

Używając css powodujesz, że przeglądarka dodaje do elementu atrybut style - te style są ZAWSZE [prawie] najważniejsze - żaden hover z tym nie wygra.
Żeby to ominąc, a jednocześnie nie mieszkać kodu JS z wyglądem strony - użyj addClass i removeClass - i w css definiuj kolory i ważność poszczególnych styli