Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
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??
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/>??
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.
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!!
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