Bug Interessante neste Código jQuery

[Teixeira Junior Scorpion 1]

iae Galera Beleza??

Bom vim aqui pra ve se esse pessoal me ajuda

ja tentei diversas vezes ajeitar esse bug e ainda não consegui então vamos la

$hoverq = "SELECT * FROM usuarios WHERE nome = '".$row['usuario_perguntou']."'";
$hovers = mysql_query($hoverq);
while($hoverf = mysql_fetch_array($hovers)){
echo "<div id='bug'><div id='hover' style='display:none;'><div id='bg' style='position:relative;left:-3px;top:1px;width:371px; height:100px;'><img style='width:364px; height:150px;' src='".$hoverf['background']."'/></div><div id='useravatar' style='position:relative; left:-115px;top:-10px;'><img src='".$hoverf['avatar']."' style='margin-top:3px; margin-left:3px;' width='100' height='100'/></div><div style='position:relative; left:-10px; top:-125px;'><h3>".$hoverf['nome']."</h2><div style='font-size:10px; width:200px; color:#ccc; word-wrap:break-word; position:relative; top:-10px;left:60px;'><b>".$hoverf['motto']."</b></div></div></div></div>";
}

Bom como cês viram no codigo acima eu faço um WHILE do PHP

pra exibir os resultados e exibe normalmente

agora vamos ao jQuery:

<script>
$("#hover").hide();
$("#perguntou").hover(function(){
	$("#hover").show("slow")
});
$("#hover").mouseout(function(){
	$(this).hide("slow");
});
</script>

se vocês entenderem o código faz apenas o seguinte

esconde a div #hover

quando passar o mouse por cima da div perguntou mostra a div #hover

quando o mouse sair da div #hover

esconde a div #hover

Certo né?

agora oque acontece e o seguinte rodando essa pagina

o código só faz isso

uma vez por exemplo

tenho 6 resultados do while

o código só e funcional no primeiro

Bom e isso ai

se Poderem Desde Já Agradeço!

Grande abraço!

Só Lembrando o Código php não esta todo ai mais essa é a parte que importa!

[William Bruno 1501]

a questão é que você não pode repetir o atributo ID:

<div id='hover'

trabalhe com classes.

[Teixeira Junior Scorpion 1]

não entendi amigo

[Henrique Barcelos 290]

Troque:

<div id='hover'

Por:

<div class='hover'

[Teixeira Junior Scorpion 1]

o Problema agora e que está exibindo a div em todos os resultados

por exemplo se passo o mouse por cima da div #perguntou

ao inves de mostrar a div class .hover so onde eu passei o mouse em cima

mostra em todas as divs .hover

alguem sabe como resolver?

[William Bruno 1501]

leia, this javascript:

http://wbruno.com.br/2011/06/21/afinal-e-javascript/

[Teixeira Junior Scorpion 1]

cara eu sei oque é this

'-'

ajudou em nada

[hinom 5]

o atributo id de cada elemento deve ser único, conforme mencionado no post #2

 

dentro do laço de repetição adicione um número para diferenciar os ids

 

$i = 0;
while($hoverf = mysql_fetch_array($hovers)){
echo "<div id='bug".$i."'><div id='hover".$i."' style='di.....

$i++;
}

 

a saída HTML será:

<div id='bug0'><div id='hover0' style='di.....
<div id='bug1'><div id='hover1' style='di.....
<div id='bug3'><div id='hover3' style='di.....

 

veja agora que isso vai te dar mais trabalho, porque será necessário criar os css de acordo com cada id

 

$("#hover0").hide();
       $("#perguntou0").hover(function(){
               $("#hover0").show("slow")
       });
       $("#hover0").mouseout(function(){
               $(this).hide("slow");
       });


$("#hover1").hide();
       $("#perguntou1").hover(function(){
               $("#hover1").show("slow")
       });
       $("#hover1").mouseout(function(){
               $(this).hide("slow");
       });

se tiver 50, serão escritos 50 desses aí.. redundante..

 

 

por isso, o modo mais elegante e até correto de se resolver é aplicar o "this" no momento do evento...

para atribuir os eventos, utilize os recursos do jquery (uma vez que já está utilizando) inclusive para setar o estilo css, deixando o código mais limpo