Arquivo Discussoes de Programacao e Tecnologia Boa tarde pessoal,
Estou tentando mudar a cor de um texto para quando o mouse passar em cima através do hover, mas o efeito não funciona. Alguém pode me ajudar?
Estou chamando esses estilos numa div com style=“color:white”
#home {
padding-top: 50px;
padding-left: 600px;
z-index: 15;
position: absolute;
font-size: 25px;
}
#home:hover{
color:yellow;
}
Posta o código html
<head>
<title>Bar</title>
<link rel="stylesheet" type="text/css" href="folha3.css"/>
</head>
<div>
<a href="pagina6.html"><img src="petiscos.jpg" style="padding-top: 260px; padding-left: 230px; z-index:9; position: absolute; height: 52%"
onMouseOver="this.src='petiscosmarrom.jpg'"
onMouseOut="this.src='petiscos.jpg'"
onClick="location='pagina6.html'"></a></div>
<div>
<a href="pagina7.html"><img src="carnes.jpg" style="padding-top: 260px; padding-left: 760px; z-index:8; position: absolute; height: 52%"
onMouseOver="this.src='carnesmarrom.jpg'"
onMouseOut="this.src='carnes.jpg'"
onClick="location='pagina7.html'"></a></div>
<div>
<a href="pagina8.html"><img src="bebidas.jpg" style="padding-top: 260px; padding-left: 1280px; z-index:7; position: absolute; height: 52%"
onMouseOver="this.src='bebidasmarrom.jpg'"
onMouseOut="this.src='bebidas.jpg'"
onClick="location='pagina8.html'"></a></div>
<div id="cardapio">
<p style="color: yellow; font-family: CooperplateLight;">Cardápio</p>
</div>
<div id="sobre">
<a href="pagina4.html" style="color: white; font-family: CooperplateLight; text-decoration: none">Sobre</a>
</div>
<div id="reservas">
<a href="pagina5.html" style="color: white; font-family: CooperplateLight; text-decoration: none;">Reservas e Contato</a>
</div>
<div id="cardtitulo">
<p style="color: white; font-family: CooperplateLight;">CARDÁPIO</p>
</div>
<div id="bolinhas">
<p style="color: white;">••••••••••••••••••••</p>
</div>
<div id="telefone">
<p style="color: white">([telefone removido]</p>
</div>
<div id="telefoneimg">
<hl><img src="telefone.png" alt="Telefone"></hl>
</div>
<div id="whats">
<p style="color: white">([telefone removido]</p>
</div>
<div id="whatsimg">
<hl><img src="whatsimg.png" alt="Whatsapp"></hl>
</div>
<div id="facebook">
<a href="http://www.facebook.com.br" alt="Facebook" target="_blank"><img src="facebook.png"></a>
</div>
<div id="instagram">
<a href="http://www.instagram.com" alt="Instagram" target="_blank"><img src="instagram.png"></a>
</div>
<p style="padding-top: 880px; padding-left: 830px; z-index:4; position: absolute; color: white; font-size: 25px;">
|</p>
<p style="padding-top: 889px; padding-left: 860px; z-index:4; position: absolute; color: white; font-size: 21px;">
Rua 7 de Setembro, 1026 - Centro</p>
<p style="padding-top: 880px; padding-left: 1200px; z-index:4; position: absolute; color: white; font-size: 25px;">
|</p>
<p style="padding-top: 889px; padding-left: 1230px; z-index:4; position: absolute; color: white; font-size: 21px;">
Segunda a Sábado, 17h30 a 00h30</p>
<img style="position:absolute; height: 948px; width: 1900px; z-index: 1;" src="fotocapa1.jpg"class="img-float">
<a href="pagina1.html"><img style="position:absolute; left:230px; top:30px; z-index:18; height: 9%" src="logo.png"class="img-float"></a>
<div style="background: black; position: absolute;z-index:10;height: 134px; width: 1900px;">
</div>
<div style="background: black; position: absolute;z-index:2; height: 60px; width: 1900px;top: 901px;">
</div>
</body>
Cade o id home na página?
Eu criei um .css separado e linkei no html
#telefone {
font-size: 21px;
padding-top: 889px;
padding-left: 270px;
z-index: 4;
position: absolute;
}
#telefoneimg {
padding-top: 907px;
padding-left: 230px;
z-index: 4;
position: absolute;
}
#whats {
font-size: 21px;
padding-top: 889px;
padding-left: 500px;
z-index: 4;
position: absolute;
}
#whatsimg {
padding-top: 907px;
padding-left: 460px;
z-index: 4;
position: absolute;
}
#instagram {
padding-top: 907px;
padding-left: 700px;
z-index: 5;
position: absolute;
}
#facebook {
padding-top: 907px;
padding-left: 760px;
z-index: 5;
position: absolute;
}
#home {
padding-top: 50px;
padding-left: 600px;
z-index: 15;
position: absolute;
font-size: 25px;
}
#cardapio {
padding-top: 25px;
padding-left: 790px;
z-index: 11;
position: absolute;
font-size: 25px;
}
#sobre {
padding-top: 50px;
padding-left: 1000px;
z-index: 14;
position: absolute;
font-size: 25px;
}
#reservas {
padding-top: 50px;
padding-left: 1180px;
z-index: 13;
position: absolute;
font-size: 25px;
}
#cardtitulo {
padding-top: 119px;
padding-left: 230px;
z-index: 13;
position: absolute;
font-size: 40px;
}
#bolinhas {
padding-top: 160px;
padding-left: 230px;
z-index: 14;
position: absolute;
font-size: 30px;
}
Ta, mas cade o componente com o id home?
Não sei porque, mas virou esse “início” em cima da id=“cardápio” na hora da postagem.
<div id="home">
<a href="pagina2.html" style="font: CooperplateLight; color: white; text-decoration: none;">Início</a>
</div>
#home a:hover {
color: yellow
}
Não funcionou. Já tentei aumentar o z-index ou colocar !important e nada…
z-index é o terceiro eixo, ou seja, para posicionar acima
O problema é que você definiu o estilo do componente na propriedade style e essa propriedade tem prioridade(precedência) a estilos do arquivo .css
O certo é você tirar a propriedade style e colocar um class no componente a, passando todas os seus estilos para a classe
EDIT: Na verdade não é necessário criar uma classe extra, segue o exemplo abaixo:
#home a {
font: CooperplateLight;
color: white;
text-decoration: none;
}
#home a:hover {
color: yellow
}
----------------------------
<div id="home">
<a href="">Algum texto</a>
</div>
Agora deu certo e entendi o problema. Valeu Mike, me ajudou muito!
O legal também é voce fazer um efeito de transição de cor
#home a {
font: CooperplateLight;
color: white;
text-decoration: none;
transition: color 0.5s linear;
}
Com a propriedade transition, a cor vai demorar 0.5s para trocar por inteira ao invés de trocar de uma vez só.
Faz o teste ai e ve o que acha.
Você pode trocar o color por praticamente qualquer outra propriedade para fazer um “efeito”
Coloca [RESOLVIDO] no nome do tópico e marca a resposta como Solução para facilitar quem estiver com o mesmo problema
Blz cara, vou aplicar essa dica também. Valeu pela ajuda!