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

jQuery II: Aula 7 - Hovering nas propagandas

Só por curiosidade: Por que as linhas de propaganda não recebem o efeito de hover? É porque a aplicação da classe 'hovering' vem depois da aplicação da classe 'propaganda'?

2 respostas
solução!

Olá David,

As linhas da propaganda não recebem o efeito de hover porque o td de dentro da tr, recebe as propriedades da regra CSS ".propaganda td" que sobrescreve as propriedades de background do "hovering" conforme abaixo:


<tr class="propaganda">
    <td colspan="6">O que acha de comprar uma bicicleta?/td> 
    <-- Este td já possui backgroud definido na regra CSS conforme abaixo-->
</tr>

.propaganda td {
    background: #9f0 none repeat scroll 0 0; <-- background definido, se for removido o efeito hover irá aparecer na propaganda
    color: #333;
    font-style: italic;
    padding: 1em 0.5em;
    text-align: center;
}

Como a regra CSS ".propaganda td" é mais especifica que ".hovering", ele mescla as propriedades considerando a mais específica, no caso o background de ".propaganda td".

Se entendi bem sua outra questão, a class ".hovering" é adicionado depois da class ".propaganda" por que ela é incluída via jQuery através da function hover.

$(".carrinho tbody tr").hover(daDestaque, tiraDestaque);

Sim, eu não prestei atenção que a classe era aplicada no 'td' e não no 'tr'. Ótima resposta, obrigado!