Ir para conteúdo
Fórum Script Brasil
  • 0

Um efeito meio boca de cruzeta na tabela


Frank K Hosaka

Pergunta

Encontrei no Google um código que muda a cor da linha e da coluna sob a célula em que o mouse parar (efeito "hover").

O código funciona, desde que você não defina a cor do <td>, <th> ou <tr>.

astudy.php
---------------------------------------

<style>
/* fonte: https://css-tricks.com/simple-css-row-column-highlighting/ */
table {overflow: hidden}
tr:hover {background-color: #ffa}
td, th {position: relative;}
td:hover::after,
th:hover::after {content: "";position: absolute;background-color: #ffa;left: 0;top: -5000px;height: 10000px;width: 100%;z-index: -1}
</style>
<table>
<tr><th><th>Col-1</th><th>Col-2</th><th>Col-3</th><th>Col-4</th><th>Col-5</th>
<tr><td>Lin-1</td><td></td><td></td><td></td><td></td><td></td>
<tr><td>Lin-2</td><td></td><td></td><td></td><td></td><td></td>
<tr><td>Lin-3</td><td></td><td></td><td></td><td></td><td></td>
<tr><td>Lin-4</td><td></td><td></td><td></td><td></td><td></td>
<tr><td>Lin-5</td><td></td><td></td><td></td><td></td><td></td>
</table>

 

Editado por Frank K Hosaka
Link para o comentário
Compartilhar em outros sites

0 respostass a esta questão

Posts Recomendados

Até agora não há respostas para essa pergunta

Participe da discussão

Você pode postar agora e se registrar depois. Se você já tem uma conta, acesse agora para postar com sua conta.

Visitante
Responder esta pergunta...

×   Você colou conteúdo com formatação.   Remover formatação

  Apenas 75 emoticons são permitidos.

×   Seu link foi incorporado automaticamente.   Exibir como um link em vez disso

×   Seu conteúdo anterior foi restaurado.   Limpar Editor

×   Você não pode colar imagens diretamente. Carregar ou inserir imagens do URL.



  • Estatísticas dos Fóruns

    • Tópicos
      152,3k
    • Posts
      652,3k
×
×
  • Criar Novo...