Já testei varias opções para aplicar uma mudança de comportamento apenas no preço, mas sem sucesso. :(
Você está vendo a versão anterior da nova experiência da Alura que estamos preparando para você. Em breve, ela ganha uma identidade visual novinha totalmente pensada em potencializar seus estudos!
Solucionado
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! :)