How To Highlight Multiple Rows When Hovering Over One Row

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 question

Solution 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 #ddd;
}

 tr:hover{background-color:red}

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

<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><table><tr><th>First Name</th><th>Last Name</th><th>Points</th></tr><tr><td>Peter</td><td>Griffin</td><tdclass="hasRowSpan"rowspan="2">$100</td></tr><tr><td>Lois</td><td>Griffin</td></tr><tr><td>Joe</td><td>Swanson</td><tdclass="hasRowSpan"rowspan="2">$300</td></tr><tr><td>Cleveland</td><td>Brown</td></tr></table>

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

tr:hover {
  background-color: red
}

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

<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><table><tr><th>First Name</th><th>Last Name</th><th>Points</th></tr><tr><td>Peter</td><td>Griffin</td><tdclass="hasRowSpan"rowspan="2">$100</td></tr><tr><td>Lois</td><td>Griffin</td></tr><tr><td>David</td><td>Rijo</td><td>$500</td></tr><tr><td>Joe</td><td>Swanson</td><tdclass="hasRowSpan"rowspan="2">$300</td></tr><tr><td>Cleveland</td><td>Brown</td></tr></table>

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

tr:hover {
  background-color: red
}

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

<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><table><tr><th>First Name</th><th>Last Name</th><th>Points</th></tr><tr><td>Peter</td><td>Griffin</td><tdclass="hasRowSpan"rowspan="2">$100</td></tr><tr><td>Lois</td><td>Griffin</td></tr><tr><td>David</td><td>Rijo</td><td>$500</td></tr><tr><td>Joe</td><td>Swanson</td><tdclass="hasRowSpan"rowspan="2">$300</td></tr><tr><td>Cleveland</td><td>Brown</td></tr></table>

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