Jump to content
Fórum Script Brasil
  • 0

Mudar cor de elemento com Jquery somente pelo Script


Deck

Question

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 to comment
Share on other sites

1 answer to this question

Recommended Posts

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.



  • Forum Statistics

    • Total Topics
      152.2k
    • Total Posts
      652k
×
×
  • Create New...