Hover na Div 1 trocar cor de link de div2

[Weblur 0]

Olá pessoal

 

To tentando resolver uma questão q pensei q fosse ultra simples. Mas pelo jeito, estou errando feio.

 

É o seguinte: tenho uma div chamada de fundo, onde ela carrega um bg e dentro desta div, tenho outras 4 divs.

 

O q preciso:

 

Ao passar o mouse sobre a div fundo q deve ser o link, seja trocada a cor da div cidade.

Da maneira q eu montei, só funciona passando o mouse na div cidade.

 

HTML

<div class="fundo" onclick="window.open('http://google.com.br','_blank');" style="cursor:pointer;">
<div class="mes">nov</div>
<div class="data">16</div>
<div class="cidade">Curitiba - PR</div>
<div class="local">Empresa X</div>
</div>

 

CSS

 

.fundo {
margin-left:-3%;
background-image: url(../imgs/transp.png);
background-repeat: no-repeat;
width: 298px;
height: 61px;
float: left;
z-index: -9999;
padding-bottom: 10px;

}

.mes {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #F00;
text-decoration: none;
text-align: center;
width:39px;
text-transform: uppercase;
font-weight: 700;
margin-bottom: 4px;
margin-top:10px;
margin-left: 3%;
	}	
.data {
background-image: url(ag.png);
background-repeat: no-repeat;
font-family: Arial, Helvetica, sans-serif;
font-size: 19px;	
line-height: 23px;
color: #FFF;
text-decoration: none;
width:39px;
height:30px;
text-align: center;
float:left;	
font-weight: 500;
margin-left: 3%;
margin-bottom: 10px;
}

.cidade {
font-family: Arial, Helvetica, sans-serif;
font-size: 15px;
color: #CCC;
text-decoration: none;
text-align: left;
padding-left:54px;
margin-top:-13px;
margin-left: 3%;
font-weight: 600;
}	

.local {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
line-height: 14px;
color: #878787;
text-decoration: none;
text-align: left;
padding-left:54px;
margin-top:5px;
margin-bottom:30px;
font-weight: 100;
margin-left: 3%;
}

.local a:link, .cidade a:link {
text-decoration:none;
color: #CCC;
cursor: pointer;
}	

.fundo a:visited, .cidade a:visited  {
text-decoration:none;
color: #CCC;
cursor: pointer;
}	

.local a:hover, .cidade a:hover {
text-decoration:underline !important;
color: #a08a4d;
cursor: pointer;
}	

 

Tentei com o seguinte Jquery, mas tb não deu certo:

 

$('.fundo').hover(function() {

$('.cidade').addClass('.cidade2');

}, function() {

$('.cidade').removeClass('.cidade2');

});

 

Aí criei a div cidade2 com a cor desejada.....

 

Por favor, me ajudem nisso??

[ricardo_mc 19]

Isso acontece porque você está separando os CSS por vírgulas, dessa forma você aplica a classe individualmente, ao invés de linká-las.

 

.local a:hover, .cidade a:hover
.fundo a:visited, .cidade a:visited 

 

Se você quer que ao passar o mouse sobre a div mãe, as divs filhas sejam alteradas, você não pode colocar vírgula no CSS e nem o :hover na filha.

 

Se você usar o código abaixo, qund passar o mouse na div "fundo", vai alterar apenas a div "local"

.fundo:hover .local{...}

 

Se você quiser que além da div "local" receber um efeito qundo passar o o mouse sobre o "fundo", ela ganhar um novo efeito ao passar o mouse sobre o "local", faz assim:

 

.fundo:hover .local{...} // passando o mouse sobre o fundo, modifica o local
.fundo:hover .local:hover{...}  // passando o mouse sobre o fundo e depois sobre o local, adiciona novo efeito no local

Vê se isso resolve o problema

[Weblur 0]

Olá amigo ricardo_mc!!

 

Tá quase perfeito!!

 

No entanto, o q ocorre agora é q todos as divs fundo se tranformaram em link, mesmo no html não ter nenhuma referência a isso. Ou seja, ao passar o mouse sobre a div fundo, o div cidade muda de cor, mesmo ser tem link.

 

Consegue me ajudar novamente :D/>??

[ricardo_mc 19]

Claro.

 

Acontece o seguinte, quando declaramos o css assim:

.fundo:hover .local{...}

Quer dizer que toda vez que eu passou o mouse sobre algum elemento com a classe ".fundo", todos os elementos internos a esse com a classe ".local" terão efeito.

 

Se você quer restringir apenas a um elemento, você pode declarar assim:

.fundo:hover a.local{...}

Repare que agora fui mais específico. Quer dizer que apenas os elementos "<a class='local'>" serão influenciados.

 

Se a sua classe ".local" ficar em algum elemento "pai" acima do <a>, então você pode declarar assim:

.fundo:hover .local a {...}

Quer dizer que ao passar o mouse sobre um elemento com a classe ".fundo", todas os elementos <a> que estiverem dentro de algum elemento com a classe ".local" (e esse esteja dentro da classe ".fundo"), serão alterados.

 

 

Vê se isso resolve seu problema.

[Weblur 0]

Oi Ricardo

 

Em primeiro lugar, me perdoe pela demora. Tive q resolver um outro projeto q estava pendente e só pude voltar a este agora.

 

Muitíssimo obrigada, com a sua ajuda, consegui resolver a questão.

E além de tudo, você foi muito didático e consegui aprender um pouco mais sobre essa questão de A na frente e A depois.

 

você é demais!! Obrigada mesmo e parabéns por compartilhar seu conhecimento comigo!!