css trabalhando errado!

Oi, Geovane, tudo bem?

O hover, propriedade que cria esse efeito, está da tag li e na h2. A tag li compreende a lista de informações dos produtos.

Caso você queira, que o efeito do hover só no p*, você retira da tag *li e da h2 e coloca só no p, podendo ficar assim:

.produto-descricao:hover {
    color: red;
    font-size: 20px;
}

Mas você precisa decidir antes o quê que precisa ficar grande ou mudar de cor quando você passar o mouse por cima, a partir disso, você pode estilizar como deseja.

Espero ter te ajudado!

oi laís eu não entendi nada!kkkk

Oi, Geovane, eu entedi que você não quer que o h2 mude quando o mouse é passado por cima, certo? todos os h2 deles aumentam, como faço pra só o que eu clicar aumentar?

A ideia do hover (que a propriedade que o instrutor usou para que o elemento ficasse estilizado) é que quando você passe o mouse por cima de um determinado elemento, ele modifique para uma algumas estilização específica. Pode mudar de cor, ficar maior, transparente, com sombra... Vai depender do layout escolhido. No caso, você não quer o hover que modifique a h2? Você precisa tirar o hover e utlizar o evento de click, para quando for clicado aumentar o h2 ou outra tag, e para isso precisa do evento de click do Javascript, aqui vai o link da documentação: https://developer.mozilla.org/pt-BR/docs/Web/API/Element/click_event Pegou a ideia?

na verdade eu quero que apenas o h2 que eu clicar mude o layout, o que esta acontecendo é que todos mudam!

desculpe não estar entendendo o que você diz, mais se eu mudar o que você esta falando vai bagunçar minha pagina!