Função para mudar cor de um elemento.

[proflupin 0]

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:

 

Menu ao passar o mouse em uma categoria:

e

 

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?

[Felipe Guedes Coutinho 0]

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