Ir para conteúdo
Fórum Script Brasil
  • 0

Mudar cor de elemento com Jquery somente pelo Script


Deck

Pergunta

Galera,

Sou novato por aqui e estou com uma dúvida cruel, gostaria de uma ajuda de vocês.

Tenho o seguinte código abaixo..

---------------------------------------------------------------------------------------------------------------------------------------------------------

<!DOCTYPE html>

<html lang="pt-br">

<head>

<title>Atividade</title>

<meta charset="utf-8">

<script src="jquery-1.6.4.min.js"></script>

<style type='text/css'>

div {float:left;width:100%}

div>div {float:left;font-size:16px;width:25px;height:25px}

</style>

<script>

$(function(){

$("div > div").each(function(){

c = Math.floor(Math.random()*255);

c = Math.floor(Math.random()*255);

c = Math.floor(Math.random()*255);

$(this).css('background-color','rgb('+c+','+c+','+c+')');

});

$('div > div').hover(

function(){

$(this).next().addClass('sobre');

$(this).prev().addClass('sobre');

var pos = $(this).parent().children().index(this);

$(this).parent().prev().children().eq(pos).addClass('sobre');

$(this).parent().next().children().eq(pos).addClass('sobre');

},

function(){

$(this).next().removeClass('sobre');

$(this).prev().removeClass('sobre');

var pos = $(this).parent().children().index(this);

$(this).parent().prev().children().eq(pos).removeClass('sobre');

$(this).parent().next().children().eq(pos).removeClass('sobre');

});

});

</script>

</head>

<body>

<div>

<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>

</div>

<div>

<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>

</div>

<div>

<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>

</div>

<div>

<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>

</div>

<div>

<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>

</div>

<div>

<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>

</div>

<div>

<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>

</div>

</body>

</html>

---------------------------------------------------------------------------------------------------------------------------------------------------------

Este código, por sua vez, esta gerando um monte de quadrados um ao lado do outro, em tons de cor, na tonalidade de cinza, que a cada F5 na página, esses quadrados mudam de cor aleatóriamente.

Mas o que não estou conseguindo fazer, é que ao posicionar o cursor sobre um destes quadrados, a sua cor de fundo deve ser alterada para a média da cor das células esquerda e direita. E ao retirar o mouse a cor da célula deverá voltar para a cor anterior.

Sei que não é uma coisa tão difícil para quem já manja..

Mas meu cabelos já estão caindo e não consigo resolver este problema.

alguém poderia me ajudar?

Vlw rapaziada.

Galera,

Sou novato por aqui e estou com uma dúvida cruel, gostaria de uma ajuda de vocês.

Tenho o seguinte código abaixo..

---------------------------------------------------------------------------------------------------------------------------------------------------------

<!DOCTYPE html>

<html lang="pt-br">

<head>

<title>Atividade</title>

<meta charset="utf-8">

&lt;script src="jquery-1.6.4.min.js"></script>

<style type='text/css'>

div {float:left;width:100%}

div>div {float:left;font-size:16px;width:25px;height:25px}

</style>

&lt;script>

$(function(){

$("div > div").each(function(){

c = Math.floor(Math.random()*255);

c = Math.floor(Math.random()*255);

c = Math.floor(Math.random()*255);

$(this).css('background-color','rgb('+c+','+c+','+c+')');

});

$('div > div').hover(

function(){

$(this).next().addClass('sobre');

$(this).prev().addClass('sobre');

var pos = $(this).parent().children().index(this);

$(this).parent().prev().children().eq(pos).addClass('sobre');

$(this).parent().next().children().eq(pos).addClass('sobre');

},

function(){

$(this).next().removeClass('sobre');

$(this).prev().removeClass('sobre');

var pos = $(this).parent().children().index(this);

$(this).parent().prev().children().eq(pos).removeClass('sobre');

$(this).parent().next().children().eq(pos).removeClass('sobre');

});

});

</script>

</head>

<body>

<div>

<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>

</div>

<div>

<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>

</div>

<div>

<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>

</div>

<div>

<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>

</div>

<div>

<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>

</div>

<div>

<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>

</div>

<div>

<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>

</div>

</body>

</html>

---------------------------------------------------------------------------------------------------------------------------------------------------------

Este código, por sua vez, esta gerando um monte de quadrados um ao lado do outro, em tons de cor, na tonalidade de cinza, que a cada F5 na página, esses quadrados mudam de cor aleatóriamente.

Mas o que não estou conseguindo fazer, é que ao posicionar o cursor sobre um destes quadrados, a sua cor de fundo deve ser alterada para a média da cor das células esquerda e direita. E ao retirar o mouse a cor da célula deverá voltar para a cor anterior.

Sei que não é uma coisa tão difícil para quem já manja..

Mas meu cabelos já estão caindo e não consigo resolver este problema.

alguém poderia me ajudar?

Vlw rapaziada.

Detalhe maldito.. só é possivel fazer as mudanças pela tag <script> não posso mexer no HTML.. ¬¬

Link para o comentário
Compartilhar em outros sites

1 resposta a esta questão

Posts Recomendados

Participe da discussão

Você pode postar agora e se registrar depois. Se você já tem uma conta, acesse agora para postar com sua conta.

Visitante
Responder esta pergunta...

×   Você colou conteúdo com formatação.   Remover formatação

  Apenas 75 emoticons são permitidos.

×   Seu link foi incorporado automaticamente.   Exibir como um link em vez disso

×   Seu conteúdo anterior foi restaurado.   Limpar Editor

×   Você não pode colar imagens diretamente. Carregar ou inserir imagens do URL.



  • Estatísticas dos Fóruns

    • Tópicos
      152,3k
    • Posts
      652,3k
×
×
  • Criar Novo...