Hover - css does not work

Question

Hover - css does not work

Navigation

#1 by (3 votes)
#2 by (2 votes)

2

I'm doing something stupid but I do not know which one.

I'm basically trying to create some classes in css, but it's not working as expected

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;
}

In theory the class 'tr.mostok' should activate the hover in the entire row of the table when I hover over it, however, it is only painting a single table cell. Remember that if I throw the name 'mostok' and I leave only:

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

The Hover is active on the entire line normally.

Below is the function that should create the table.

       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: I have another CSS file that helps in formatting the table, is it generating some conflict?

 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 : To create the entire table, I do it this way:

<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>

Above is how the table is made, I did not put the php that assembles the table because it makes no difference to the stylization. All the css that "embellishes" the table I already posted above, I left exactly as it is on my computer, ie with all the suggestions that have been given me here, and the way it is, the hover does not work: >

php html css

asked by anonymous 09.01.2018 / 18:25

2 answers

2

EDIT: Placing the color in Hover

What is happening is that Background-Color of TH does not let you see the color change of Background-Color of TR .

In short, you have to take the background color of the TH and put a background color in the TR as the code below:

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>

Your mistake is that you have separated :hover from the class

The correct one would be like this

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

Selector reference source :hover - link

09.01.2018 / 18:34

How do I get this effect in a progress bar? How to print the percentage sign in Python 2/3?

score 3 · Accepted Answer

Example on jsfiddle .

What you need to do to make it work.

First you need to declare how you want to go without the hover:

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

td, th {
  position: relative;
}

and then you define in css how they got 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;
}

In this case I did generic, but I could assign this to a class like you did. defining with:

tr.mostok:hover{

}

where mostok would be the class.