Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Litiser

CSS alterando elementos

Por , em Desenvolvimento frontend

Recommended Posts

Litiser    0

Litiser
Postado

Ola gostaria de saber se com uma class ou um id colocado em um elemento tem como eu alterar outro elemento que não tenha nenhuma class ou id....para exemplificar colocarei um exemplo:

 

...<style>div.um {width: 292px;height: 258px;}a{color: gray;}a:hover{......}....<div class="um"><a href="#">teste</a</div><div>aqui</div>....
A minha dúvida e a seguinte, melhor explicada, conforme o "exemplo" acima eu tenho um elemento <div> com a class definida no css, um, dentro da div tenho um <a> e defini no css as suas definições quero saber se tem como eu definir na propriedades do css a:hover alguma coisa que consiga alterar a a minha segunda <div>....tipo quando eu passar o mouse em cima do link alterar o background da minha segunda div ou algo do tipo mas isso setando as propriedades do "a:hover" e não da segunda div

 

Se não entenderem minha dúvida eu tento explicar denovo

 

Atenciosamente grato

Compartilhar este post

Link para o post
Compartilhar em outros sites

webflex    0

webflex
Postado

Olá,Sinceramente não percebi :s.Tente ser mais explicito.Cumps \o/

Compartilhar este post

Link para o post
Compartilhar em outros sites

Litiser    0

Litiser
Postado

Olá,Sinceramente não percebi :s.Tente ser mais explicito.Cumps \o/

O que quero fazer é por exemplo passar o mouse sobre um link e assim ele mudar o background de uma div especifica...ta entendivel agora?

Compartilhar este post

Link para o post
Compartilhar em outros sites

Leonardo P    0

Leonardo P
Postado

só com css acho que não, mas com um pouco de js dá pra fazer.

 

function tal(id){window.document.getElementById(id).style.oestiloquevcquer = tals;}

aí você chama o evento onmouseover, por exemplo, no link e passa a id do que você quer mudar.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Guilherme Rambo    4

Guilherme Rambo
Postado

No caso:

<div class="um"><a href="#" onmouseover="this.parent.style.backgroundColor='corquevcquer';">teste</a></div>

[]'s

Compartilhar este post

Link para o post
Compartilhar em outros sites

André do Vale    76

André do Vale
Postado

No caso:

<div class="um"><a href="#" onmouseover="this.parent.style.backgroundColor='corquevcquer';">teste</a></div>

[]'s

Inside, não saco muito bem destas ações em JS, porém, além de alterar a parte "corquevcquer", qual parte eu altera para fazer a mudança em outro elemento??[]s

Compartilhar este post

Link para o post
Compartilhar em outros sites

Nícolas    4

Nícolas
Postado

Faz assim...

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<title>Untitled Document</title>

<style type="text/css">

 

div {

width: 292px;

height: 258px;

background-color: #F1F1F1;

margin-bottom: 12px;

}

a{

color: #006699;

}

a:hover{

color: #666666;

}

</style>

<script type="text/javascript">

<!--

function mudacor (id,acao){

if (acao == "1"){

//MUDA A COR PARA #CCCCCC QUANDO O MOUSE ESTIVER SOBRE O LINK

document.getElementById(id).style.backgroundColor = "#CCCCCC";

}else{

//VOLTA A COR #F1F1F1 QUANDO O MOUSE É TIRADO DO LINK

document.getElementById(id).style.backgroundColor = "#F1F1F1";

}

}

-->

</script>

</head>

 

<body>

 

 

 

<div class="um"><a href="#" onmouseover="mudacor('mudadecor','1');" onmouseout="mudacor('mudadecor','0');">Div 1</a></div>

<div id="mudadecor">Div 2</div>

 

</body>

</html>

Da uma estudada no código que você vai entender =)

 

As partes em azuis são a ligação dos ID's

A parte em verde é a ação executada (muda cor para a nova, e volta para a anterior

E em vermelho é a ação sobre o link, executa a função em JS pra mudar a cor da div com o ID mudadecor.

 

Bom é isso, espero ter ajudado e não ter confundido com a explicação ;)

Compartilhar este post

Link para o post
Compartilhar em outros sites

Guilherme Rambo    4

Guilherme Rambo
Postado

This = Elemento "a"

Parent = 'Pai' do elemento "a"

 

Utilizando aquele jeito que mostrei fica com menos código http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

 

[]'s

Compartilhar este post

Link para o post
Compartilhar em outros sites

Nícolas    4

Nícolas
Postado

This = Elemento "a"

Parent = 'Pai' do elemento "a"

 

Utilizando aquele jeito que mostrei fica com menos código http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

 

[]'s

Bom Inside... não querendo descordar mas ja descordando, hehehe

 

Realmente fica "menos códigos" porem com função alem de deixar o código mais organizado, fica mais facil para alteração.

 

E o "menos código" vai da utilização...

 

Se fosse pra fazer o mesmo que você fez era simples

<div class="um"><a href="#" onmouseover="document.getElementById('mudadecor').style.backgroundColor = "#CCCCCC";">Div 1</a></div><div id="mudadecor">Div 2</div>
Fico alguns caracteres maior que o seu é verdade, mas se você parar pra ver se você passar um comando mouseout para voltar a cor que era antes ja vai aumentar bem mais a linha do código...

 

Mas com a função como eu disse fica melhor porque além de organizar melhor o código é mais facil para implementar isso em mais divs...

 

Um exemplo disso...

 

Com a mesma função que passei la em cima, só mudando o código HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<title>Untitled Document</title>

<style type="text/css">

 

div {

width: 400px;

height: 100px;

background-color: #F1F1F1;

margin-bottom: 12px;

}

a{

color: #006699;

}

a:hover{

color: #666666;

}

</style>

<script type="text/javascript">

<!--

function mudacor (id,acao){

if (acao == "1"){

//MUDA A COR PARA #CCCCCC QUANDO O MOUSE ESTIVER SOBRE O LINK

document.getElementById(id).style.backgroundColor = "#CCCCCC";

}else{

//VOLTA A COR #F1F1F1 QUANDO O MOUSE É TIRADO DO LINK

document.getElementById(id).style.backgroundColor = "#F1F1F1";

}

}

-->

</script>

</head>

 

<body>

 

 

 

<div class="um">

<a href="#" onmouseover="mudacor('primeira_div','1');" onmouseout="mudacor('primeira_div','0');">Primeira Div</a>

<a href="#" onmouseover="mudacor('segunda_div','1');" onmouseout="mudacor('segunda_div','0');">Segunda Div</a>

<a href="#" onmouseover="mudacor('terceira_div','1');" onmouseout="mudacor('terceira_div','0');">Terceira Div</a>

<a href="#" onmouseover="mudacor('quarta_div','1');" onmouseout="mudacor('quarta_div','0');">Quarta Div</a>

</div>

 

<div id="primeira_div">Primeira Div</div>

<div id="segunda_div">Segunda Div</div>

<div id="terceira_div">Terceira Div</div>

<div id="quarta_div">Quarta Div</div>

 

</body>

</html>

Mais simples, mais facil entendimento, se precisar alterar a cor, só alterar na função que ja altera de todos ao mesmo tempo.

 

Sei lá... nem sempre pouco código é sinal de facilidade, simplicidade e agilidade...

:rolleyes:

 

E corrigindo... nesse caso que utilizei que fica menos código...

 

Faz a mesma coisa que fiz nesse de cima com o seu e veja qual dará menos código, e qual tera um entendiento melhor, código mais limpo e tal...

 

Nada contra seu código... apenas botando meu ponto de vista http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

 

 

 

 

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

 

Editando

Aaaa e pelo que entendi ele quer alterar a cor da DIV de baixo, não a que contem o link ^_^

 

Flw

Compartilhar este post

Link para o post
Compartilhar em outros sites

Guilherme Rambo    4

Guilherme Rambo
Postado

Vai a opção que ele preferir, pelo que eu entendi era a div do próprio link, mas o que importa é que alguma das soluções vai funcionar[]'s

Compartilhar este post

Link para o post
Compartilhar em outros sites

Paulo de Tarso F. M.    24

Paulo de Tarso F. M.
Postado

Gostei do "debate" entre vocês, #INSIDE# e nick171... Vou aprendendo um pouco de JS só lendo os posts de vocês aqui no WS (nem no JS preciso "ir"... rsrsrs)...

 

Mas então, só para constar, #INSIDE#, o Litiser quer alterar a cor de fundo de uma segunda div, e não a que o link se encontra... Exemplo:

 

[div 1][link dentro do div 1 para mudar a cor de fundo da div 2][/div 1]

 

[div 2]Ao clicar no link da div 1, a cor de fundo dessa div muda[/div 2]

 

Sei que você entendeu, mas para quem está "chegando agora", só para complementar...

 

Abraço!

Compartilhar este post

Link para o post
Compartilhar em outros sites

Guilherme Rambo    4

Guilherme Rambo
Postado

Sei que você entendeu, mas para quem está "chegando agora", só para complementar...

Beleza ;)[]'s

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Desenvolvimento frontend
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito