Problemas com mouseover + this!

[Micilini Roll 49]

Olá pessoal eu tenho um pequeno efeito interativo! assim que passa o mouse sobre uma div ela altera a sua cor original,aqui esta o comando:

 

<script>
$(document).ready(function(){
  $("#ther").mouseover(function(){
    $(this).css("background-color","#3C4854");
  });
  $("#ther").mouseout(function(){
    $(this).css("background-color","#1D2328");
  });
});
</script>

<div id="ther">
Gauer do Brasil<br>
<hr style="opacity:0.30;">
</div>

<div id="ther">
Arnold<br>
<hr style="opacity:0.30;">
</div>

<div id="ther">
Atlhetica<br>
<hr style="opacity:0.30;">
</div>

 

quando se passa o mouse em cima da primeira div ther(aonde esta escrito gauer do brasil) a div muda de cor e fica tudo numa boa! mas quando eu passo o mouse na segunda div escrito arnold,ela nao altera de cor?

 

mas era para aparecer pois no javascript eu declarei:

 

$(this).css

 

 

alguem pode me ajudar???

[William Bruno 1501]

isso pq vc não pode duplicar um ID.

 

use classes:

<script>
$(document).ready(function(){
  $(".ther").mouseenter(function(){
    $(this).css("background-color","#3C4854");
  });
  $(".ther").mouseleave(function(){
    $(this).css("background-color","#1D2328");
  });
});
</script>

<div class="ther">
Gauer do Brasil<br>
<hr style="opacity:0.30;">
</div>

<div class="ther">
Arnold<br>
<hr style="opacity:0.30;">
</div>

<div class="ther">
Atlhetica<br>
<hr style="opacity:0.30;">
</div>

além disso troquei mouseover por mouseenter.

Para um efeito tão simples, pq vc não usa apenas o :hover do css ?

[Micilini Roll 49]

mais uma vez muito obrigado! vlw mesmo +1 pra voce agora eu sei que o id nao se duplica! para estas ocasioes vlw aprender isso! abracoes!