[Resolvido] Mudar class de uma div

Peter.Lopes · Abril 27, 2011

Olá Membros do Fórum...

Eu estou tentando criar um script pra mudar um fundo de uma div apenas passando o mouse em um link só que não esta funcionando..

Bem.. não sou nenhum Expert no assunto JS tentei vários tutoriais só que sem sucesso. então estou aqui pedindo a ajuda de vocês.

vou explicar melhor com um exemplo...

css

.estilo1{
background-color:#006;	
}

.estilo2{
background-color:#0C3;

}

.estilo3{
background-color:#F00;

}

#conteudo{
height:500px;
width:500px;
background-color:#CCC;
}

Html

<body>
<div id='conteudo'>
<a href='#'>link1</a><!--Ao passar o mouse muda a div #conteudo para o estilo 1 -->
<a href='#'>link2</a><!--Ao passar o mouse muda a div #conteudo para o estilo 2 -->
<a href='#'>link3</a><!--Ao passar o mouse muda a div #conteudo para o estilo 3 -->
</div>
</body>

E o código JS (eu sei que esta errado) foi uma de minhas tentativas frustradas de fazer funcionar.

$(document).ready(function(){
function(){
$('#conteudo').hover(function(){$(this).find('.estilo1');}
									 )};
function(){
$('#conteudo').hover(function(){$(this).find('.estilo2');}
									 )};

function(){
$('#conteudo').hover(function(){$(this).find('.estilo3');}
									 )};

});

Peço a ajuda de vocês :)

zrod · Abril 27, 2011


HTML:
<body>
  <div id='conteudo'>
     <a id="estilo1" href='#'>link1</a><!--Ao passar o mouse muda a div #conteudo para o estilo 1 -->
     <a id="estilo2" href='#'>link2</a><!--Ao passar o mouse muda a div #conteudo para o estilo 2 -->
     <a id="estilo3" href='#'>link3</a><!--Ao passar o mouse muda a div #conteudo para o estilo 3 -->
  </div>
</body>


JS:
$(document).ready(function() {
  $("#conteudo a").mouseover(function() {
     $(this).parent().removeClass().addClass($(this).attr('id'));
  });
});

Obs.: Não testado

Bruno Augusto · Abril 27, 2011

Funcionar vai, mas talvez não haja a necessidade do removeClass()

zrod · Abril 27, 2011

A cada vez que o usuário passar o mouse sobre o link, ele adicionará uma class relativa ao id do mesmo em #conteudo.

Após passar por um segundo item terá duas propriedades de background-color definidas.

Por isso a razão do removeClass().

Bruno Augusto · Abril 27, 2011

Bem lembrado, havia esquecido desse detalhe. :thumbsup:

Peter.Lopes · Abril 28, 2011

Gostaria de dar uma explicação por ontem não poder fica na internet para poder debater sobre esse assunto, não quero que pensem que eu sou mais um membro que posta uma duvida e abandona. :)

Quero agradecer Zord e ao Bruno que me ajudaram nesse pequeno problema, porem esse script que o zord me enviou não esta funcionando.

Eu fiz o teste assim...

<html>
<head>

<style type="text/css">

#estilo1{
background-color:#006;	
}

#estilo2{
background-color:#0C3;

}

#estilo3{
background-color:#F00;

}

#conteudo{
height:500px;
width:500px;
background-color:#CCC;
}

</style>

<script type="text/javascript">

$(document).ready(function() {
  $("#conteudo a").mouseover(function() {
     $(this).parent().removeClass().addClass($(this).attr('id'));
  });
});

</script>

</head>

<body>
<div id='conteudo'>
     <a id="estilo1" href='#'>link1</a><!--Ao passar o mouse muda a div #conteudo para o estilo 1 -->
     <a id="estilo2" href='#'>link2</a><!--Ao passar o mouse muda a div #conteudo para o estilo 2 -->
     <a id="estilo3" href='#'>link3</a><!--Ao passar o mouse muda a div #conteudo para o estilo 3 -->
  </div>
</body>
</html>

Bruno Augusto · Abril 28, 2011

Eu ainda não ajudei nada, todo mérito é do zrod (e não Zord ^_^).

Mas é, e não é tão estranho.

Não é estranho porque agora que não estou morrendo de sono, acabei percebendo que o código do zrod adiciona uma classe com o mesmo nome do ID atualmente... sobreposto? Não sei a melhor tradução :P

Acontece, que não existe no CSS as classes estilo1, estilo2 e estilo3.

Até aí tudo bem. Eis que vem a parte estranha. Se adicionar essas classes, atribuindo um mesmo bloco de propriedades à dois seletores:

#estilo, .estilo1 {}

Deveria funcionar, mas não funcionou. :o

Como eu sempre digo, faço de um tudo com a jQuery, mas nem sempre faço da melhor maneira. Se ajudar, assim funcionou:

<script type='text/javascript'>

$(document).ready(function() {

   $( '#conteudo a' ).hover(

       function() {
           $( this ).parent().css( 'background-color', $( this ).css( 'background-color' ) );
       },

       function() {
           $( this ).parent().css( 'background-color', '#CCC' );
       }
   );
});

</script>

Se tirar o mouse de cima do elemento você quiser manter a cor que a DIV-pai recebeu, basta remover a segunda function (e a vírgula logo antes dela), que se refere ao evento mouseout.

Peter.Lopes · Abril 28, 2011

Rsrsrsrsr foi mal Zrod :P me desculpa ai cara rsrs!!

:cry: Valeu Bruno mas ainda não esta funcionando aqui, com certeza eu estou fazendo alguma coisa de errado :huh:

já li umas 5 vezes o seu post e já tentei refazer o código css e html varias vezes (não mexi no script que você mandou)

e mesmo assim não esta funcionando.

ja botei o html assim...


<style type="text/css">

#estilo, .estilo1{
background-color:#006;	
}

#estilo, .estilo2{
background-color:#0C3;	
}

#estilo, .estilo3{
background-color:#F00;
}

#conteudo{
height:500px;
width:500px;
background-color:#CCC;
}

</style>
.
.
.
<body>
<div id='conteudo'>
     <div id="estilo">
     <a class="estilo1" href='#'>link1</a><!--Ao passar o mouse muda a div #conteudo para o estilo 1 -->
     <a class="estilo2" href='#'>link2</a><!--Ao passar o mouse muda a div #conteudo para o estilo 2 -->
     <a class="estilo3" href='#'>link3</a><!--Ao passar o mouse muda a div #conteudo para o estilo 3 -->
       </div>
  </div>
</body>

já mudei para...

<style type="text/css">

.estilo1{
background-color:#006;	
}

.estilo2{
background-color:#0C3;	
}

.estilo3{
background-color:#F00;
}

#conteudo{
height:500px;
width:500px;
background-color:#CCC;
}

</style>
.
.
.
<body>
<div id='conteudo'>
     <div id="estilo">
     <a class="estilo1" href='#'>link1</a><!--Ao passar o mouse muda a div #conteudo para o estilo 1 -->
     <a class="estilo2" href='#'>link2</a><!--Ao passar o mouse muda a div #conteudo para o estilo 2 -->
     <a class="estilo3" href='#'>link3</a><!--Ao passar o mouse muda a div #conteudo para o estilo 3 -->
       </div>
  </div>
</body>

e agora ficou assim...

<html>
<head>

<style type="text/css">

#estilo, .estilo1{
background-color:#006;	
}

#estilo, .estilo2{
background-color:#0C3;	
}

#estilo, .estilo3{
background-color:#F00;
}

#conteudo{
height:500px;
width:500px;
background-color:#CCC;
}

</style>

<script type='text/javascript'>

$(document).ready(function() {

   $( '#conteudo a' ).hover(

       function() {
           $( this ).parent().css( 'background-color', $( this ).css( 'background-color' ) );
       },

       function() {
           $( this ).parent().css( 'background-color', '#CCC' );
       }
   );
});

</script>

</head>

<body>
<div id='conteudo'>

     <a class="estilo1" href='#'>link1</a><!--Ao passar o mouse muda a div #conteudo para o estilo 1 -->
     <a class="estilo2" href='#'>link2</a><!--Ao passar o mouse muda a div #conteudo para o estilo 2 -->
     <a class="estilo3" href='#'>link3</a><!--Ao passar o mouse muda a div #conteudo para o estilo 3 -->

  </div>
</body>
</html>

Já to ficando doido por todo mundo consegui fazer eu não :wacko:

William Bruno · Abril 28, 2011

faltou incluir a biblioteca jQuery

http://docs.jquery.com/Downloading_jQuery

aprenda a debugar:

http://www.wbruno.com.br/blog/2011/03/31/como-debugar-javascript-firefox-erros-comuns/

agora pergunta aos demais:

precisava de jQuery nisso ?? precisava ?

http://www.cenasordidas.hbe.com.br/t.html

:lol:

se vcs olharem meu codigo js, a solução que fiz é 3 vezes mais inteligente do que a que foi apresentada com jQuery.

Peter.Lopes · Abril 28, 2011

rsrsrs :D É verdade eu esqueci de colocar a jQuery :D

agora esta uma belezinha rsrsrs

Muito obrigado William

agora uma duvida qual código seria melhor pra usar em um site?

o meu site eu já uso a jQuey pra outros casos... Mas se eu fosse fazer um site do zero qual código seria o melhor? com a Jquey ou sem ela?

William Bruno · Abril 28, 2011

o meu site eu já uso a jQuey pra outros casos... Mas se eu fosse fazer um site do zero qual código seria o melhor? com a Jquey ou sem ela?

se você já usa, então digamos que 'tudo bem', e nesse caso é melhor que você então utilize jQuery.

oque não vejo sentido, é carregar uma lib de 70k apenas para isso.

Entendeu ?

Existem alguns problemas nas implementações com jQuery que foram apresentadas.

Compare a lógica que os 2 códigos usam.

Peter.Lopes · Abril 28, 2011

beleza vou dar uma comparada sim :joia:

e essa era a minha duvida se caso eu fizesse um site que não usa a Jquery, se era mais vantajoso usar ela. Como ela tem 70k acaba deixando o site com 70k sem necessidade (eu já imaginava isso).

Bem mais um tópico concluído... Muito obrigado ao William, Bruno e Zrod. :D

Bruno Augusto · Abril 28, 2011

Ah! Mas hoje eu dia eu duvido sinceramente que alguém ainda programe JavaScript no braço quando um framework simplifica 90% do serviço.

William Bruno · Abril 28, 2011

Ah! Mas hoje eu dia eu duvido sinceramente que alguém ainda programe JavaScript no braço quando um framework simplifica 90% do serviço.

Eu programo, e estudo js puro e no braço até hoje.

@Bruno, leia:

http://www.wbruno.com.br/blog/2011/04/04/nao-jquery-nao-aprenda-qualquer-framework-antes-de/

O ponto, é saber qndo usar, ou não.

Bruno Augusto · Abril 29, 2011

Já li o artigo. Infelizmente eu não estudo JavaScript não apenas pelo ganho de produtividade que tenho com a jQuery, mas também pelo fato de que a linguagem como um todo não me faz sentir tão conformtável como a jQuery me deixa.

Pode parecer implicância ou até mesmo preguiça, mas pra mim não faz sentido focar tanto numa linguagem que não é bem o meu forte. Respeito seu esforço, mas sempre peso os prós e os contras.

Tenho livros sobre JavaScript e AJAX, na com frameworks, tudo puro. Mas para produção, não rola.

Arquivado

[Resolvido] Mudar class de uma div

Recommended Posts

Peter.Lopes 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

zrod 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Bruno Augusto 417

Compartilhar este post

Link para o post

Compartilhar em outros sites

zrod 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Bruno Augusto 417

Compartilhar este post

Link para o post

Compartilhar em outros sites

Peter.Lopes 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Bruno Augusto 417

Compartilhar este post

Link para o post

Compartilhar em outros sites

Peter.Lopes 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501

Compartilhar este post

Link para o post

Compartilhar em outros sites

Peter.Lopes 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501

Compartilhar este post

Link para o post

Compartilhar em outros sites

Peter.Lopes 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Bruno Augusto 417

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501

Compartilhar este post

Link para o post

Compartilhar em outros sites

Bruno Augusto 417

Compartilhar este post

Link para o post

Compartilhar em outros sites

Fixar div até atingir uma certa altura

Ajuda com Extends e envio para o banco

PHP+Codeginiter - Orientação para Impressão

Fóruns

Tempo Real

Informação importante