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??
Carregando comentários...