Solucionado (ver solução)
Solucionado
(ver solução)
3
respostas

hover não funciona

<main>
                <ul class="produtos">
                    <li>
                        <h2>Cabelo</h2>
                        <img src="cabelo.jpg">
                        <p class="produto-descicao">Na tesoura ou máquina, como o cliente preferir!</p>
                        <p class="produto-preco">R$ 25,00</p>
                    </li>
                    <li>
                        <h2>Barba</h2>
                        <img src="barba.jpg">
                        <p class="produto-descicao">Corte e desenho profissional!</p>
                        <p class="produto-preco">R$ 18,00</p>
                    </li>
                    <li>
                        <h2>Cabelo + Barba</h2>
                        <img src="cabelo+barba.jpg">
                        <p class="produto-descicao">Pacote completo de cabelo e barba!</p>
                        <p class="produto-preco">R$ 35,00</p>
                    </li>
                </ul>
            </main>
}
.produtos li {
    display: inline-block;
    text-align: center;
    width: 30%;
    vertical-align: top;
    margin: 0 1.5%;
    padding: 30px 20px;
    box-sizing: border-box;
    border: 2px solid black;
    border-radius: 10px;
}
3 respostas

Oi Carlos, tudo bem? Para acessar e modificar a propriedade hover (quando passamos o mouse por cima), precisamos fazer da seguinte maneira no CSS:

.produtos li:hover {
    /* Código desejado aqui */
}

Você já tentou dessa maneira, continua não funcionando? Fico no aguardo do seu retorno!

De qualquer maneira, espero ter ajudado! Bons estudos!

Acabei colocando o CSS errado na pergunta. Aqui o código certo.

            <main>
                <ul class="produtos">
                    <li>
                        <h2>Cabelo</h2>
                        <img src="cabelo.jpg">
                        <p class="produto-descricao">Na tesoura ou máquina, como o cliente preferir!</p>
                        <p class="produto-preco">R$ 25,00</p>
                    </li>
                    <li>
                        <h2>Barba</h2>
                        <img src="barba.jpg">
                        <p class="produto-descricao">Corte e desenho profissional!</p>
                        <p class="produto-preco">R$ 18,00</p>
                    </li>
                    <li>
                        <h2>Cabelo + Barba</h2>
                        <img src="cabelo+barba.jpg">
                        <p class="produto-descricao">Pacote completo de cabelo e barba!</p>
                        <p class="produto-preco">R$ 35,00</p>
                    </li>
                </ul>
            </main>
.produtos {
    width: 940px;
    margin: 0 auto;
    padding: 50px 0px;
}

.produtos li {
    display: inline-block;
    text-align: center;
    width: 30%;
    vertical-align: top;
    margin: 0 1.5%;
    padding: 30px 20px;
    box-sizing: border-box;
    border: 2px solid black;
    border-radius: 10px;
}

.produtos li:hover {
    border-color:rgb(150, 100, 7,);

}
solução!

Oi Carlos, obrigada pelo retorno!

Verifiquei seu código e veja que na parte do :hover tem uma vírgula sobrando no final (do lado do 7), causando um erro.

A maneira correta seria:

.produtos li:hover {
    border-color:rgb(150, 100, 7);
}

Veja se agora funciona! Qualquer dúvida só me retornar aqui, abraços e bons estudos!