Hover - css does not work

Asked

Viewed 430 times

2

I’m doing something stupid but I don’t know which.

Basically I’m trying to create some css classes, 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 passed the mouse over it, however it is only painting a single cell of the table. Remembering that if I take the name 'mostok' and leave only:

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

Hover activates on the entire line normally.

Below follows 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 php that mounts the table pq makes no difference to stylization. All the css that "beautifies" the table I have already posted above, I left exactly as it is on my computer, ie with all the suggestions that were given to me here, and the way it is, the Hover does not work :(

php html css

  • It has some style for class . Okay, or what has CCS is all there?

  • edited my jsfiddle, I forgot to update the link

  • Shinchila, put the HTML also, preferably with the <head> to know if something is importing, and see how you rode the <table>

  • Shinchila edited my answer with some information. now have to solve, test there.

  • Shinchila I also did some tests here and it seems that when you set the color in the class td.ok it overcolocts the color in your Hover and so it does not work will paint. temporarily removes the class das tds in your php and you will see that it will work. Pf me give a feadback

2 answers

3


Example in jsfiddle.

What you need to do for Hover to work.

First you need to declare how you want it to be without the Hover:

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

td, th {
  position: relative;
}

and then you define in css how they stayed with 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 Generico, but I could assign it to a class as you did. defining with the:

tr.mostok:hover{

}

where mostok would be the class.

2

EDIT: Putting the color on Hover

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

Summarizing in :hover you have to take the background color of the TH and put a background color on the TR as per 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 broke up the :hover class

The right thing would be

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

Source of selector reference :hover - https://www.w3schools.com/cssref/sel_hover.asp

  • I joined and now the Hover doesn’t work

  • @Shinchila_matadora edited my reply with a table snippet with the tr.mostok:hover{ }, is working normal. If there is problem I advise you to put the whole code in the question. This makes it easier to give you a precise answer. But I can tell you :hover, alone as it is in your code will not work.

  • I also don’t know what might be happening,when I together remove the space between :Hover and mostok, the Hover stops working I edited the question with the second file I use to style the table.

  • I’ve edited the question with everything I’ve done so far

Browser other questions tagged php html css

You are not signed in. Login or sign up in order to post.