Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
Olá, estou me matando aqui para entender uma lógica que gostaria que fosse aplicada no meu menu, segue aonde estou parando e não consigo achar uma solução.
https://jsfiddle.net/bandey47/
Notem que ao passar o mouse sobre o link do menu, o background do icone muda para um tom verde, até ai blz, eu gostaria que o fundo do texto mudasse para preto quando houvesse um hover, ou seja, ao passar o mouse sobre o link o background do icone ficaria verde (já está ficando) e juntamente com ele o background do texto ficaria preto.
Porém já fiz trocentos testes mais não consigo a logica de como aplicar um hover desta forma.
Gostaria de sugestões e um auxilio dos colegas, como resolver isso?
Obrigado!
Opa, obrigado ;)
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
<style type="text/css">
* {
margin: 0;
padding: 0;
}
body {
background: #ccc;
}
.box {
width: 20%;
height: 50px;
display: flex;
margin: 15px;
align-items: center;
justify-content: center;
background: white;
cursor: pointer;
} background: #fff;
height: 100%;
width: 27%;
text-align: center;
color: black;
line-height: 2;
font-size: 25px;
} background: #00fff3;
}
.texto {
width: 100%;
text-align: left;
font: 18px 'Roboto', sans-serif;
text-transform: uppercase;
font-weight: 100;
text-indent: 17px;
height: 100%;
align-items: center;
display: flex;
} background: black;
color: white;
}
@import url(http://fonts.googleapis.com/css?family=Roboto:300);
</style>
</head>
<body>
<content>
<div class="box">
<i class="fa fa-opencart" aria-hidden="true"></i>
<dvi class="texto">Loja</dvi>
</div>
<div class="box">
<i class="fa fa-opencart" aria-hidden="true"></i>
<dvi class="texto">Loja</dvi>
</div>
</content>
</body>
</html>
Acho que está estudável, boa sorte.Muito obrigado, já deu pra ter uma boa ideia, não tava entendendo a lógica, mais a sua ficou muito limpa e simples, obrigado pela ajuda :D
Hora.. Não precisa de uma div para cada coisa é simples veja:
<style>
.muda_de_cor {
background-color: red;
color: blue
}
.muda_de_cor:hover {
background-color: blue;
color: red
}
</style>
<div class="muda_de_cor">TEXTO</div>
Vou tentar desenvolver um código, o seu não vou conseguir editar, logo mais eu posto aqui ou edito.