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

Gostaria de fazer um :hover no <p> do preço. É possível?

Já testei varias opções para aplicar uma mudança de comportamento apenas no preço, mas sem sucesso. :(

4 respostas

Adiciona o trecho de código correspondente a ao preço, e o css do hover que você cricou por favor

<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>
    </ul>
</main>

.produtos { width: 940px; margin: 0 auto; padding: 50px 0; }

.produtos li:hover{ border-color: #C78C19; }

.produtos li:active{ border-color: #088C19;}

.produtos li:hover h2{ font-size: 34px; }

.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 #000000; border-radius: 10px; }

.produtos h2 { font-size: 30px; font-weight: bold; }

.produto-descricao { font-size: 18px; }

.produto-preco { font-size: 22px; font-weight: bold; margin-top: 10px; }

.produto-preco { font-size: 22px; font-weight: bold; margin-top: 10px; }

Você colocou a classe mas não coloocou uma ação do hover por exemplo;

Testa esse código css abaixo:

.produto-preco:hover {
        color: red;
}
solução!

Oi Anna, valeu pela sugestão. Este código funciona, mas apenas quando passa o mouse sobre o texto do preço. Depois descobri o que eu queria: .produtos li:hover .produto-preco { color: red; } Valeu por me ajudar a encontrar um caminho! :)