css Hover in a table with rowspan

Asked

Viewed 1,278 times

0

Table - Example 

table,
th,
td {
  border: 1px solid black;
}

tr:hover {
  background-color:coral;
}
<table>
  <tr>
    <th>Col 1</th>
    <th>Col 2</th>
    <th>Col 3</th>
  </tr>
  <tr>
    <td>Dados1</td>
    <td>Dados1</td>
    <td rowspan="2">Dados1 Rowspan</td>
  </tr>
  <tr>
    <td>Dados1</td>
    <td>Dados1</td>
  </tr>

  <tr>
    <td>Dados2</td>
    <td>Dados2</td>
    <td rowspan="2">Dados2 Rowspan</td>
  </tr>
  <tr>
    <td>Dados2</td>
    <td>Dados2</td>
  </tr>



</table>

How can I use the effect Hover to change the full line color as in the image below ?

Example :

inserir a descrição da imagem aqui

html css
  • 1

    What seems to be the problem hover is working?

  • For example when the user passes the mouse all the information of the data would be with same background , ie the whole line and not only picking a few lines.

  • Dude is confused this, what you want is that just the td (Table Data) containing the attribute rowspan who receive the hover change the background? That’s the answer below , resolves... If not, try to give the right name to the elements you want to manipulate if it doesn’t get confused.

  • You want when hovering over an item of the row the whole row to change the background or each item of the separate table?

  • I’m sorry I was really confused kk , already edited the statement..

1 answer

1


Using Jquery:

  • Add in your <tr> the same class representing the content line.

Done this Jquery will capture the event of hovering over the <tr> after this you will get the class of the same and assign the background-color for all others <tr> which have the same class.

$('tr').hover(function(){

  var mudar = $(this).attr('class');
  
  $('.'+mudar).css('background-color','coral');

},function(){

     var mudar = $(this).attr('class');
  
  $('.'+mudar).css('background-color','#fff');

});
table,
th,
td {
  border: 1px solid black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
    <th>Col 1</th>
    <th>Col 2</th>
    <th>Col 3</th>
  </tr>
  <tr class='linha1'>
    <td>Dados1</td>
    <td>Dados1</td>
    <td rowspan="2">Dados1 Rowspan</td>
  </tr>
  <tr class='linha1'>
    <td>Dados1</td>
    <td>Dados1</td>
  </tr>

  <tr class='linha2'>
    <td>Dados2</td>
    <td>Dados2</td>
    <td rowspan="2">Dados2 Rowspan</td>
  </tr>
  <tr class='linha2'>
    <td>Dados2</td>
    <td>Dados2</td>
  </tr>



</table>

Browser other questions tagged html css

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