How to highlight multiple rows when hovering over one row

Question

In my table I have a some values in a column that span over multiple rows. When I hover over this value only one row is hilighted (the row containing the actual value). My quest

Answer 1

If your question is about when hovering $100, both Peter and Lois rows should get highlighted then you cannot do it with css alone as per my understanding. You are suppose to go for js scripts.

Check below snippet for reference. Hover on td with rowspan. Hope this helps.

$('.hasRowSpan').hover(function(){
	$(this).closest('tr').toggleClass('bg-red');
  $(this).closest('tr').next('tr').toggleClass('bg-red');
});

table {
  border-collapse: collapse;
  width: 100%;
}

th,
td {
  padding: 8px;
  text-align: left;
  border-bottom: 1px solid #ffffd;
}

 tr:hover{background-color:red}

.bg-red{
  background-color:red;
}

  

    
First Name
    
Last Name
    
Points
  
  

    
Peter
    
Griffin
    
$100
  
  

    
Lois
    
Griffin
  
  

    
Joe
    
Swanson
    
$300
  
  

    
Cleveland
    
Brown
  

Update: You can use nextAll() when rowspan has more than 2 rows.

Find below updated snippet as per your comment.

$('tr').hover(function() {
  if ($(this).find('td').hasClass('hasRowSpan')) {
    $(this).next('tr').toggleClass('bg-red');
  }
  if ($(this).prev('tr').find('td').hasClass('hasRowSpan')) {
    $(this).prev('tr').toggleClass('bg-red');
  }
});

table {
  border-collapse: collapse;
  width: 100%;
}

th,
td {
  padding: 8px;
  text-align: left;
  border-bottom: 1px solid #ffffd;
}

tr:hover {
  background-color: red
}

.bg-red {
  background-color: red;
}

  

    
First Name
    
Last Name
    
Points
  
  

    
Peter
    
Griffin
    
$100
  
  

    
Lois
    
Griffin
  
  

    
David
    
Rijo
    
$500
  
  

    
Joe
    
Swanson
    
$300
  
  

    
Cleveland
    
Brown
  

Update 1: I just updated the script as per your comment here. Note: Am sure this won't be working if you have rowspan more than 2.

$('.hasRowSpan').hover(function() {
  $(this).closest('tr').toggleClass('bg-red');
  $(this).closest('tr').next('tr').toggleClass('bg-red');
});

$('tr').hover(function() {
  if ($(this).prev('tr').find('td').hasClass('hasRowSpan')) {
    $(this).prev('tr').find('td.hasRowSpan').toggleClass('bg-red');
  }
});

table {
  border-collapse: collapse;
  width: 100%;
}

th,
td {
  padding: 8px;
  text-align: left;
  border-bottom: 1px solid #ffffd;
}

tr:hover {
  background-color: red
}

.bg-red {
  background-color: red;
}

  

    
First Name
    
Last Name
    
Points
  
  

    
Peter
    
Griffin
    
$100
  
  

    
Lois
    
Griffin
  
  

    
David
    
Rijo
    
$500
  
  

    
Joe
    
Swanson
    
$300
  
  

    
Cleveland
    
Brown
  

Update 2: Check above snippet, I have changed my code as per your desired output.