css tabela zebrada - hover destacar linha não funciona com <td cla

[Ericsson Berg 2]

Olá!!

 

Tenho um CSS de tabela zebrada que cria direitinho as linhas zebradas.

 

Mas estou com um problema que é o seguinte:

 

A partir do momento em que coloco um class na <td> da tabela para alterar a cor, o CSS que destaca a linha da tabela zebrada quando o mouse está em cima não altera a cor do <td>.

 

Então como posso fazer um CSS para que consiga destacar a linha toda mesmo tendo uma td nomeada com class que altera a sua cor?

[Ericsson Berg 2]

De tanto ler e mexer descobri!!!

 

 

Sintaxe:

table tr:hover > td

Assim dá para selecionar toda a linha independente de ter ou não class que alteram a cor no <td>

[L. Henrique 179]

Solução CSS:

• Adicionar :hover a tr como no exemplo que preparei no JSFiddle.

Solução jQuery:

• Adicionar um evento hover ao elemento td, trocando a classe ou propriedade de tr. Veja: JSFiddle.

Obs.: O método criado em jQuery é funcional, porém ERRADO e NÃO PRÁTICO. Ele foi feito para fins de estudos, para entender como é a função hover do jQuery e como ele afeta os elementos. Para não ter essa multiplicação de conteúdo, trabalhe com um for que talvez fique melhor.

[Ericsson Berg 2]

A sua dica foi interessante, mas da forma que passei é mais simples.

 

Dá para resolver com CSS mesmo.

 

Pega a tr no evento :hover e com > pega todos os filhos do tr, ou seja, os td.

[L. Henrique 179]

Ericsson, preste atenção na minha resposta. Deixei ambas as soluções, idem com a pseudo-classe citada. Lembrando que em uma tabela, você não precisa selecionar os elementos filhos, já que os atributos da classe pai são passadas as filhas.

Não existe a necessidade de encher o CSS com: table tr:hover > td, já que o mesmo efeito seria obtido com tr:hover.

Seria interessante dar uma lida nesse artigo (inglês): Modular and Scalable CSS.

Considere que a solução em JS previne a adição de classes e id's por tr (inclusive previne de ficar criando nth-of-type ou nth-child dentro do CSS). Isso, é claro, se estruturado corretamente dentro de um for.

[Ericsson Berg 2]

Entendi a sua linha de raciocínio, na questão o jquery resolveria o problema que tive e quebrei a cabeça.

 

Só achei simples a forma que mencionei.

 

Como você falou o evento :houver do tr pega o td, mas no código que tive problemas o td possuia class nomeada que alteravam as cores de um a sequência a fim de destacar uma coluna, tipo destacar a coluna com o nome da empresa.

 

E indicando o td após o evento :hover como filho do tr:hover a linha passou a ficar toda de uma só cor, onde antes somente conseguia obter o destaque da linha onde a td não possuia class nomeada.

 

Mas obrigado pela sua ajuda, sua sugestão vai me ajudar em um outro problema!!

 

Vlw!