2

estou fazendo alguma burrada mas não sei qual.

Basicamente estou tentando criar algumas classes em css, mas não está funcionando do modo esperado

td.ok {
height:26px;
padding-left:4px;
padding-right:2px;
font-family:Verdana, Geneva, sans-serif;
font-size:12px;
white-space:nowrap;
border-bottom:solid 1px #E1E1E1;
background-color: #A2CD5A;
color: black;
}
tr.mostok:hover{
background-color: green;
color:black;
}

em teoria a classe 'tr.mostok' deveria ativar o hover na linha inteira da tabela quando eu passasse com o mouse por cima da mesma, entretanto só está pintando uma unica célula da tabela. Lembrando que se tiro o nome 'mostok' e deixo somente:

tr:hover{
background-color: green;
color:black;
}

O Hover ativa na linha inteira normalmente.

Abaixo segue a função que deveria cria a tabela.

       for($n = 0; $n < $j; $n++){
       echo '<tr class="mostok">';
       for($o = 0; $o < (($k*2) + 1); $o++){

        echo '<td class="ok">' .$mat[$n][$o]. '</td>';
    }
    echo '</tr>';
}

EDIT 1: Tenho um outro arquivo CSS que ajuda na formatação da tabela, será que está gerando algum conflito?

 table {
 border-collapse: collapse;
 float: center; 
 }

 th {
 background-color:#CCC;
 font-size: 12px;
 color:#484848;
 padding-left:4px;
 padding-right:4px;
 border-bottom:solid 1px #CCC;
 height:26px;
 padding-right:5px;
 border-collapse: collapse;
 border:1px solid #F3F3F3;
 font-family:Verdana, Geneva, sans-serif;
 }

 td {
text-align: right;
 }

 caption {
        font-family: Verdana;
        font-size: smaller;
    } 

EDIT 2: Para criar a tabela inteira, eu faço desta forma:

<table align="center">
<?php

$texto_topo = "<html><body>Origem: $origem</body></html>";
 echo'<caption align="top">'.$texto_topo.'</caption>';

for($e = 0; $e < $k; $e++){
    $f = $e+1;
$legenda = "<html><body>Servidor $f: $ult_nome[$e]</body></html>";
echo'<caption align="top">'.$legenda.'</caption>';
}
echo '<tr>';
echo '<th>' .Papel. '</th>';
for($h = 1; $h < ($k + 1); $h++){
    $nome = "Hora Server";
    $hora_top = "$nome $h";
    echo '<th>' .$hora_top. '</th>';
}

for($m = 0; $m < $k; $m++){
$number_col = $m+1;
$nom_top = "Server";
$cab = "$Coluna $nom_top $number_col";
echo '<th>' .$cab. '</th>';
}
echo '</tr>';

for($n = 0; $n < $j; $n++){
    echo '<tr class="mostok">';
    for($o = 0; $o < (($k*2) + 1); $o++){

        echo '<td class="ok">' .$mat[$n][$o]. '</td>';
    }
    echo '</tr>';
}
?>
</table>

Acima tá como a tabela é feita, eu não coloquei o php que monta a tabela pq não faz diferença pra estilização. O todo o css que "embeleza" a tabela eu já postei acima, deixei exatamente como está no meu computador, ou seja com todas as sugestões que foram me dadas aqui, e da forma que está, o hover não funciona :(

5
  • vose tem algum estilo pra classe .mostok, ou o que tem de CCS está tudo ai?
    – hugocsl
    Commented 9/01/2018 às 17:32
  • editei o meu jsfiddle, tinha esquecido de atualizar o link Commented 9/01/2018 às 17:52
  • Shinchila, coloca o HTML também, de preferencia com o <head> para sabermos se está importando alguma coisa, e ver como vc montou a <table>
    – hugocsl
    Commented 9/01/2018 às 17:54
  • Shinchila editei a minha resposta com algumas informações. agora tem que resolver, teste ai.
    – hugocsl
    Commented 9/01/2018 às 18:27
  • Shinchila eu tb fiz uns testes aqui e parece que quando vc define a cor na classe td.ok ele sobrecoloca a cor no seu hover e assim ele não funciona vai pintar. tira temporariamente a class das tds no seu php e vc vai ver que funcionará. Pf me de um feadback Commented 9/01/2018 às 18:31

2 Respostas 2

2

Exemplo no jsfiddle.

O que você precisa fazer pro hover funcionar.

Primeiro você precisa declara como quer que fique sem o hover:

table {
  overflow: hidden;
}
tr{
   background-color: #f0f;
}

td, th {
  position: relative;
}

e depois você define no css como elas ficaram com o hover:

tr:hover {
      background-color: #ffa;
}

td:hover::after,
th:hover::after {
  content: "";
  position: absolute;
  background-color: #ffa;
  left: 0;
  top: -5000px;
  height: 10000px;
  width: 100%;
  z-index: -1;
}

nesse caso eu fiz generico, mas eu poderia atribuir isso a uma classe como você fez. definindo com o:

tr.mostok:hover{

}

aonde mostok seria a classe.

0
2

EDIT: Colocando a cor no Hover

O que está acontecendo é que o Background-Color do TH não deixa você ver a mudança de cor do Background-Color do TR.

Resumindo no :hover você tem que tirar a cor de fundo do TH e colocar uma cor de fundo no TR conforme o código abaixo:

tr:hover  {
    background-color: red;
}
tr:hover th {
    background-color: transparent;
}

tr.mostok:hover{
    background-color: green;
    color:black;
}
<table>
    <tr class="mostok">
        <td>gdfgdfgd</td>
        <td>dfgdfgd</td>
        <td>dfgdfgdf</td>
    </tr>
</table>

Seu erro é que você separou o :hover da classe

O correto seria assim

tr.mostok:hover{
    background-color: green;
    color:black;
}

Fonte de referência do seletor :hover - https://www.w3schools.com/cssref/sel_hover.asp

4
  • Eu juntei e agora o hover não funciona Commented 9/01/2018 às 17:40
  • @Shinchila_Matadora editei a minha resposta com um Snippet da tabela com o tr.mostok:hover{ }, está funcionando normal. Se ai está com problema te aconselho a colocar o código inteiro na pergunta. Assim fica mais fácil para te dar uma resposta precisa. Mas já te adianto que :hover, sozinho assim como está no seu código não vai dar certo.
    – hugocsl
    Commented 9/01/2018 às 17:43
  • Eu também não sei oq pode estar acontecendo,quando junto o removo o espaço entre o :hover e o mostok, o hover para de funcionar editei a pergunta com o segundo arquivo que uso pra estilizar a tabela. Commented 9/01/2018 às 17:51
  • Editei a pergunta com tudo que fiz até agora Commented 9/01/2018 às 18:05

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .