Boa tarde!! Consegui desenvolver o projeto do Alura Books com a ótima explicação e didática da querida prof Monica, mas ali mesmo no fim, tive problemas com o hover. Tentei de tudo pra saber oq houve, mas nao consegui achar. Entao eu subi o projeto no github pra ver se alguma alma piedosa por favor poderia me ajudar a descobrir oq tem d errado. Obrigada, desde já! https://github.com/dafneoliveira/Alura-Books
Oi Dafne, boa tarde!
Analisei seu projeto no GitHub e encontrei alguns pontos que podem estar impedindo o hover de funcionar corretamente: • O hover está aplicado nos elementos certos, mas alguns elementos filhos com position: absolute e z-index mais alto estão cobrindo a área, bloqueando a interação do mouse. • Isso faz com que o cursor não “veja” o elemento que deveria reagir ao hover. • Também notei que falta uma transição suave no hover, o que pode dar a impressão de que o efeito não está funcionando.
Para corrigir, sugiro: • Ajustar os z-index para que o elemento com hover fique acima dos outros. • Aplicar o hover no elemento que realmente está visível para o mouse. • Adicionar uma propriedade transition para suavizar o efeito, como: .card { transition: background-color 0.3s ease; } .card:hover { background-color: #f0f0f0; }
Obrigada pela resposta, Vitoria! Mas ainda não consegui resolver meu problema :(
Oi Dafne! Dei uma olhada novamente no seu projeto e acredito que o problema esteja relacionado ao uso de position: absolute e z-index em alguns elementos. Isso pode fazer com que certos elementos fiquem “por cima” do que deveria reagir ao hover, impedindo que o efeito funcione corretamente.
Por exemplo, mesmo que o CSS esteja correto, se um elemento com z-index: 2 estiver cobrindo um botão com z-index: 1, o hover não será aplicado no botão, porque o cursor está interagindo com o elemento de cima.
O ideal é ajustar os z-index para que o elemento que deve reagir ao hover fique acima dos demais. Também é importante aplicar o hover no elemento que realmente está visível para o mouse e não em um container oculto ou coberto.
Além disso, vale a pena adicionar uma transição suave para que o efeito fique mais perceptível. Exemplo:.card { transition: background-color 0.3s ease; }
.card:hover { background-color: #f0f0f0; }
Minha sugestão é: abra o inspetor do navegador (F12), passe o mouse sobre o elemento onde o hover deveria acontecer e veja se não tem outra camada cobrindo. Assim você consegue confirmar se o problema é realmente de sobreposição.