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
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
"
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');
-
-
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
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.