Ir para conteúdo
proflupin

Função para mudar cor de um elemento.

Recommended Posts

Tenho um menu em que ao passar o mouse sobre cada elemento, ele altera a cor de uma div invisível logo abaixo.

 

Por exemplo:

Menu normal:

image.thumb.png.eb54e00db4af676d8d4b52720249facf.png

 

Menu ao passar o mouse em uma categoria:

image.thumb.png.1616775ca2d64a52bb47131b38ae724a.png

e

image.thumb.png.fadfc8bc7178f18ff43cf4cf24c79bad.png

 

Para tal, eu desenvolvi o seguinte código em js com os eventos onmouseover e onmouseleave em minhas categorias:

<script type="text/javascript">
    	function mudaCor1() {
    		var cor = 'red';
    		document.getElementById('div1').style.backgroundColor = cor;
    	}

    	function mudaCor2() {
    		var cor = 'red';
    		document.getElementById('div1').style.backgroundColor = cor;
    	}

    	function mudaCor3() {
    		var cor = 'green';
    		document.getElementById('div1').style.backgroundColor = cor;
    	}

    	function mudaCor4() {
    		var cor = 'black';
    		document.getElementById('div1').style.backgroundColor = cor;
    	}

    	function mudaCor5() {
    		var cor = 'orange';
    		document.getElementById('div1').style.backgroundColor = cor;
    	}

    	function mudaCor6() {
    		var cor = 'brown';
    		document.getElementById('div1').style.backgroundColor = cor;
    	}

    	function mudaCor7() {
    		var cor = 'yellow';
    		document.getElementById('div1').style.backgroundColor = cor;
    	}

    	function mudaCor8() {
    		var cor = 'pink';
    		document.getElementById('div1').style.backgroundColor = cor;
    	}

    	function mudaCor9() {
    		var cor = 'purple';
    		document.getElementById('div1').style.backgroundColor = cor;
    	}

    	function mudaCor10() {
    		var cor = 'grey';
    		document.getElementById('div1').style.backgroundColor = cor;
    	}

    	function devolvecor() {
    		var cor = 'white';
    		document.getElementById('div1').style.backgroundColor = cor;
    	}
    </script>

 

Gostaria de lhes perguntar. Existe uma outra maneira mais simplificada com menos códigos para desenvolver a mesma funcionalidade?

Compartilhar este post


Link para o post
Compartilhar em outros sites

proflupin

Existe a opção de fazer esse efeito utilizando o CSS, mas no seu caso a quantidade de FOLHAS do CSS será praticamente igual, pois você ira criar uma FOLHA para cada COR com um ID especifico para que você possa atribuir a FOLHA com a COR especifico.

 

Recomendo você ler sobre HOVER CSS dentro de W3SCHOOLS - Hover CSS

 

Se a resposta lhe for útil, não esqueça de agradescer o POST e votar positivo.

Espero ter ajudado de alguma forma

 

Att
Felipe Guedes Coutinho

Compartilhar este post


Link para o post
Compartilhar em outros sites

Crie uma conta ou entre para comentar

Você precisar ser um membro para fazer um comentário

Criar uma conta

Crie uma nova conta em nossa comunidade. É fácil!

Crie uma nova conta

Entrar

Já tem uma conta? Faça o login.

Entrar Agora

  • Conteúdo Similar

    • Por juniormatrix
      Olá
       
      Achei esse script aqui no fórum mesmo:
       
      $.validator.addMethod( "customEmail", function (value, element) { return this.optional(element) || /^[\w-\.]+@fulano\.com\.br$/i.test(value); }, "Por favor, insira um e-mail válido com o domínio @fulano.com.br" ); $("#formulario").validate({ ignore: ".ignore", rules: { empresa: { required: true }, nome: { required: true }, contato: { required: true }, celular: { required: true }, email: { required: true, email: true, customEmail: true }, }, }); Testei e funcionou perfeitamente, mas gostaria que liberasse mais e-mails válidos, ao invés de apenas um.

      Tem como fazer? 
       
      Se alguém puder ajudar, fico muito grato.
    • Por Alessandro Bodão
      Salve galerinha, passando pra mostrar pra vocês o novo projeto de marca que a Jatobá Estúdio desenvolveu, espero que gostem.   https://www.behance.net/gallery/166555627/Fernanda-Pinheiro-Nutricionista-Esportiva
    • Por rogerblower
      Boas pessoal, estou precisando de um calendário para agenda com crud para agendamento, mas teria que ser free.
      Obrogado.
    • Por Sapinn
      Fala galera! Tenho um site que possui alguns icones que são puxados da biblioteca flaticon , o problema é que de uma hora pra outra esses icones pararam de aparecer. No meu ambiente local funciona, mas no ambiente de produção eles não aparecem e eu recebo o seguinte erro no console: Failed to load resource: the server responded with a status of 404 () 
       
      Alguém saberia como resolver isso?
    • Por mateus.andriollo
      Carrego um conteudo Ajax e junto com ele vem HTML e JS, existe um marcador que está relacionado a um elemento HTML, quando eu clico e este elemento tem um atributo exemplo data-onload="funcaoOla()" esta função tbm carregada pelo ajax deve ser executada.
       
      Dúvida como eu faço uma chama de função desta forma, seria como exec("funcaoOla")
       
×

Informação importante

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