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'?
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'?
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!