CSS Hover itens pai da criança

StackOverflow https://stackoverflow.com/questions/1817575

  •  08-07-2019
  •  | 
  •  

Pergunta

Eu estou tentando configurar um estilo CSS para destacar uma célula da tabela em uma tabela aninhada quando a tabela é passado sobre.

Veja código de exemplo abaixo ..... 

<html>
    <head>
        <style type='text/css'>
        table
        {
            border: solid 1px black;
        }

        table.Content:hover td.ContentIndent
        {
            background-color: #AAAAAA;
        }
        </style>
    </head>
    <body>
        <table class="Content">
            <tr>
                <td class="ContentIndent">Root Indent, could be highlighted when this table is moused over</td>
                <td>
                    <table class="Content">
                        <tr>
                            <td class="ContentIndent">Indent 1 - Should be highlighted only when this table is moused over</td>
                            <td>Content 1 - Indent 1 should be highlighted when this table is moused over</td>
                        </tr>
                    </table>
                    <table class="Content">
                        <tr>
                            <td class="ContentIndent">Indent 2 - Should be highlighted only when this table is moused over</td>
                            <td>Content 2 - Indent 2 should be highlighted when this table is moused over</td>
                        </tr>
                    </table>
                </td>
            <tr>
        </table>
    </body>
</html>

Basicamente, quando uma das tabelas filho é moused mais, eu gostaria que ele célula recuo a ser destacado. Também seria legal se as células recuo das células-mãe seria destacado.

Infelizmente, a forma como ele de configuração agora, as células de recuo de ambas as células criança se destacado, independentemente de qual tabela é moused sobre. Eu tentei isso no Firefox 3.5 e IE 8 e obter os mesmos resultados.

Eu fiz encontrar este tutorial e associado demonstração que faz basicamente o que eu estou tentando fazer, a não ser que costumava listas aninhadas em vez de tabelas. Mas, quando eu tento usar o operador> (para tornar o table.Content:hover > td.ContentIndent estilo) não funciona em todos. Eu não tenho certeza qual é a diferença.

Foi útil?

Solução

Bem, em primeiro lugar, se você quiser apoiar IE6 você está indo para o Javascript terá de alguma descrição, pois que o navegador suporta apenas o pseudo-elemento :hover em âncoras (links ou seja <a> tags).

O outro problema é que você terá o seletor CSS filho para fazer isso, que mais uma vez não é suportado no IE6.

Assim, uma versão compatível não IE6 é: 

table.Content:hover > tbody > tr > td.ContentIndent { background: #AAA; }

Observe o elemento <tbody> que é criado implicitamente.

Sem a criança (>) selector esta expressão: 

table.Content td.ContentIndent { ... }

vai agarrar cada célula travessão, porque isso é conhecido como um seletor descendente e a tabela de conteúdo de nível superior é pai de todos eles.

Você pode contornar esse problema da seguinte maneira: 

table.Content:hover td.ContentIndent { background: #AAA; }
table.Content:hover table.Content td.ContentIndent: background: #FFF; }

O segundo basicamente anula esse problema, revertendo os recuos mais profundas para o que a formatação normal deve ser. É uma técnica bastante normal para lidar com alguns problemas IE6 que poderiam ser resolvidos com um seletor de criança, mas nem sempre é possível ou prático para reverter estilos desta forma.

Para apoiar IE6 Eu recomendaria uma biblioteca Javascript. Minha opção preferida é jQuery, o que implicaria um código como este: 

$(function() {
  $("table.Content").hover(function() {
    $(this).children("tbody").children("tr")
      .children("td.ContentIndent").addClass("hover");
  }, function() [
    $(this).children("tbody").children("tr")
      .children("td.ContentIndent").removeClass("hover");
  });
});

com: 

td.hover { background: #AAA; }

Outras dicas

O problema é que você está usando a classe "Conteúdo" para a tabela circundante, bem como, de modo que o evento hover é acionado para toda a mesa sempre que o cursor entra o pai. Dê a tabela pai uma classe diferente (por exemplo, "Pai") e ele vai funcionar bem.

Um seletor como 

.Content td

geralmente se aplicam a cada td abaixo .content, não importa quão profundamente aninhados. As> especifica que a regra seja válida para filhos imediatos do elemento única e não para os mais profundo aninhadas. o IE antes de 7 não reconhece>.

Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top