Erro com :hover [RESOLVIDO]

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>
Início
<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">(16) 3321-0000</p>
</div>

<div id="telefoneimg">
   <hl><img src="telefone.png" alt="Telefone"></hl>
</div>

<div id="whats">
   <p style="color: white">(16) 99123-0000</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?

1 curtida

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!

:+1:

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!