Já testei varias opções para aplicar uma mudança de comportamento apenas no preço, mas sem sucesso. :(
Já testei varias opções para aplicar uma mudança de comportamento apenas no preço, mas sem sucesso. :(
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;
}
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! :)