0

Tenho no meu site um logo branco e um menu branco, e a minha div de contato tem o fundo branco, então estes desaparecem. Quero saber como fazer um script que mude o css do logo e do menu quando estiver nessa div.

3 Respostas 3

1

Pode resolver com CSS somente:

#foo{
	background-color:#ffffff;
	width:300px;
	height:80px;
}
#foo > .logo, #foo > .menu{
	color:#000000;
}
#bar{
	background-color:#cccccc;
	width:300px;
	height:80px;
}
.logo{
	color:#ffffff;
}
.menu{
	color:#ffffff;
}
<div id="foo">
	<div class="logo">logo</div>
	<div class="menu">menu - menu - menu</div>
</div>

Faça uma simulação. Apenas troque o id "foo" por "bar" e veja o que acontece.

<div id="foo"> troque por <div id="bar">

Quando está como "bar", a logo e o menu ficam brancos pois "bar" possui fundo cinza. Quando está como "foo", a logo e o menu ficam pretos pois "foo" possui fundo branco.

Esse efeito de troca é devido a esse trecho:

#foo > .logo, #foo > .menu{
    color:#000000;
}

Esse trecho diz "definir cor preta para um seletor logo e menu dentro de foo"

0

Você pode utilizar Jquery para fazer isso. O que você precisa definir é a ação que vai alterar essas cores, exemplo: click, change, etc.

$('#IdLogo').css('background-color','red');
$('#IdMenu').css('background-color','blue');
2
  • Dá pra fazer quando estiver na div #contato?
    – Tiago P.C
    Commented 4/02/2016 às 18:15
  • Dá pra ser feito sim. O que você precisa fazer é definir a ação, exemplo: Quando você clicar em um botão, tirar o mouse de um elemento e etc. Commented 4/02/2016 às 18:17
0

Bem pelo que entendi você usa algum sistema de Ajax para carregar o conteúdo do seu site tipo "#contato", "#quemsomos" e etc.

Pois bem no seu caso como os colegas já disseram você tem que adicionar algum evento que leia a mudança, tipo um clique ou quando é trocada a URL, e quando ocorrer fazer a troca de cores, eu sou mais o segundo caso acho mais elegante, porque a troca fica ligada diretamente a ação (no caso a troca de página), pois bem se for isso mesmo que entendi um pseudo código usando JavaScript puro seria assim:

<script>
function changeCorContato() {
 // Pega a Âncora da URL #XXXXXX
 var hash = window.top.location.hash;

 // Pinta os div caso seja o contato
 if (hash == "#contato") {
  document.getElementById("logo").style.backgroundColor = "#FF0000";
  document.getElementById("menu").style.backgroundColor = "#0000FF";
 } else {
  // Volta a cor original caso seja outra Âncora
  document.getElementById("logo").style.backgroundColor = "#FFFFFF";
  document.getElementById("menu").style.backgroundColor = "#FFFFFF"; 
 } 
}

// "Escuta" a ação de troca de Âncora
window.addEventListener("hashchange", changeCorContato, false);
</script>

<div id="logo">Logo</div>
<div id="menu">
 <a href="#home">Home</a>
 <a href="#contato">Contato</a>
</div>

Como eu disse isso é um pseudo código, você pode melhorar como usando "1 IF" único ou reescrever ele em jQuery ou outro framework de sua preferência.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .