How can we apply a hover effect to combine two rows in a table as one using CSS?

Question

How can we apply a hover effect to combine two rows in a table as one using CSS?

I'm having trouble figuring out how to highlight every two rows in a table as one when hovering over the current row. For example, if I hover on row 2, rows 2 and 3 should be highlighted. Then when I move to row 4, rows 4 and 5 should be highlighted, and so on.

Currently, when I hover over a row, only that specific row gets highlighted. Is there a way to achieve this using CSS? Or am I missing something obvious in my code?

table tr:nth-child(4n+4) {
  background-color: #EBEBEB;
}
#table tr:nth-child(4n+5) {
  background-color: #EBEBEB;
}
#table tr:hover {
  background: #3498DB;
}

You can view the code I've been working on here: http://jsfiddle.net/g5o7v6qe/21/

I apologize if my question is unclear or difficult to understand. I have some knowledge of HTML and CSS, but this particular issue has me a bit stuck. Thank you for any help you can provide.

html css

Answer 1

Answer №1

Regrettably, achieving the desired outcome solely with CSS is not feasible as CSS lacks selectors for targeting preceding children (which are essential for highlighting the row above when hovering over the description). One alternative approach would be to slightly adjust your HTML structure:

Introducing the revolutionary tbody element!

The utilization of the tbody element in tandem with thead and tfoot can facilitate functionalities such as scrolling while simultaneously ensuring the header and footer of the table remain fixed. Additionally, during printing, the header and footer may be replicated on subsequent pages if the table spans multiple pages. Refer to this inquiry for further insights.

An aspect that is often overlooked is that you can embed multiple tbody elements within a single table. This allows you to envelop each set of rows in your table within a distinct tbody element and style them individually:

#table {
  border-radius: 10px;
  border-collapse: collapse;
  width: auto;
}

#table td,
#table th {
  border: 1px solid #DDDDDD;
  padding: 8px;
}

#table th {
  padding-top: 12px;
  padding-bottom: 12px;
  text-align: center;
  background-color: #333333;
  color: white;
}

#table tbody:nth-child(2n+3) {
  background-color: #EBEBEB;
}

/* Group highlights */
#table tbody:hover {
  background: #3498D8;
}

<table align="center" id="table">
  <thead>
    <tr>
      <th>Vendor</th>
      <th>Model</th>
      <th>Year</th>
      <th>Source</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td>vendor1</td>
      <td>model1</td>
      <td>year1</td>
      <td>source1</td>
    </tr>
    
    <tr>
      <td colspan="4">description1</td>
    </tr>
  </tbody>

  <tbody>
    <tr>
      <td>vendor2</td>
      <td>model2</td>
      <td>year2</td>
      <td>source2</td>
    </tr>
    
    <tr>
      <td colspan="4">description2</td>
    </tr>
  </tbody>

  <tbody>
    <tr>
      <td>vendor3</td>
      <td>model3</td>
      <td>year3</td>
      <td>source3</td>
    </tr>
    
    <tr>
      <td colspan="4">description3</td>
    </tr>
  </tbody>

  <tbody>
    <tr>
      <td>vendor4</td>
      <td>model4</td>
      <td>year4</td>
      <td>source4</td>
    </tr>
    
    <tr>
      <td colspan="4">description4</td>
    </tr>
  </tbody>
</table>

Answer 2

Regrettably, achieving the desired outcome solely with CSS is not feasible as CSS lacks selectors for targeting preceding children (which are essential for highlighting the row above when hovering over the description). One alternative approach would be to slightly adjust your HTML structure:

Introducing the revolutionary tbody element!

The utilization of the tbody element in tandem with thead and tfoot can facilitate functionalities such as scrolling while simultaneously ensuring the header and footer of the table remain fixed. Additionally, during printing, the header and footer may be replicated on subsequent pages if the table spans multiple pages. Refer to this inquiry for further insights.

An aspect that is often overlooked is that you can embed multiple tbody elements within a single table. This allows you to envelop each set of rows in your table within a distinct tbody element and style them individually:

#table {
  border-radius: 10px;
  border-collapse: collapse;
  width: auto;
}

#table td,
#table th {
  border: 1px solid #DDDDDD;
  padding: 8px;
}

#table th {
  padding-top: 12px;
  padding-bottom: 12px;
  text-align: center;
  background-color: #333333;
  color: white;
}

#table tbody:nth-child(2n+3) {
  background-color: #EBEBEB;
}

/* Group highlights */
#table tbody:hover {
  background: #3498D8;
}

<table align="center" id="table">
  <thead>
    <tr>
      <th>Vendor</th>
      <th>Model</th>
      <th>Year</th>
      <th>Source</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td>vendor1</td>
      <td>model1</td>
      <td>year1</td>
      <td>source1</td>
    </tr>
    
    <tr>
      <td colspan="4">description1</td>
    </tr>
  </tbody>

  <tbody>
    <tr>
      <td>vendor2</td>
      <td>model2</td>
      <td>year2</td>
      <td>source2</td>
    </tr>
    
    <tr>
      <td colspan="4">description2</td>
    </tr>
  </tbody>

  <tbody>
    <tr>
      <td>vendor3</td>
      <td>model3</td>
      <td>year3</td>
      <td>source3</td>
    </tr>
    
    <tr>
      <td colspan="4">description3</td>
    </tr>
  </tbody>

  <tbody>
    <tr>
      <td>vendor4</td>
      <td>model4</td>
      <td>year4</td>
      <td>source4</td>
    </tr>
    
    <tr>
      <td colspan="4">description4</td>
    </tr>
  </tbody>
</table>

Answer 3

Answer №2

It seems like you're looking to achieve a specific effect with your table: check out this jsfiddle

#table tr:nth-child(2n+2):hover {
  background: #3498DB;
}

#table tr:nth-child(2n+2):hover + tr {
  background: #3498DB;
}

By using the nth-child(2n+2) selector starting from the second row, you can highlight every other row on hover.

Adding + tr allows you to highlight all adjacent sibling rows when one row is hovered over.

I hope this explanation clarifies things for you.

NOTE: Keep in mind that this method may not fully solve the problem if you're trying to highlight entire row groups when hovering over the second row of each group.

Answer 4

It seems like you're looking to achieve a specific effect with your table: check out this jsfiddle

#table tr:nth-child(2n+2):hover {
  background: #3498DB;
}

#table tr:nth-child(2n+2):hover + tr {
  background: #3498DB;
}

By using the nth-child(2n+2) selector starting from the second row, you can highlight every other row on hover.

Adding + tr allows you to highlight all adjacent sibling rows when one row is hovered over.

I hope this explanation clarifies things for you.

NOTE: Keep in mind that this method may not fully solve the problem if you're trying to highlight entire row groups when hovering over the second row of each group.

Answer 5

Answer №3

Javascript table row highlighting

When using CSS, it can be challenging to select a sibling element upwards in the DOM structure. However, this issue can easily be resolved with JavaScript by following the code snippet below:

$(function() {
  // Select all rows with a data-group attribute
  let rows = $("tr[data-group]");
  // Add hover functionality
  rows.hover(function over() {
    let group = $(this).data("group");
    $(this).addClass("highlight");
    $(this).siblings("tr[data-group=" + group + "]").addClass("highlight");
  }, function out() { // Remove highlight on hover out
    let group = $(this).data("group");
    $(this).removeClass("highlight");
    $(this).siblings("tr[data-group=" + group + "]").removeClass("highlight");
  });
});

table {
  border: 1px solid black;
}

td {
  padding: 0.5em 1em;
  border: 2px solid blue;
}

.highlight {
  background-color: cornflowerblue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr data-group="1">
    <td>element1</td>
    <td>element2</td>
  </tr>
  <tr data-group="1">
    <td colspan="2">Long element</td>
  </tr>
  <tr data-group="2">
    <td>element1</td>
    <td>element2</td>
  </tr>
  <tr data-group="2">
    <td colspan="2">Long element</td>
  </tr>
  <tr data-group="3">
    <td>element1</td>
    <td>element2</td>
  </tr>
  <tr data-group="3">
    <td colspan="2">Long element</td>
  </tr>
  <tr data-group="4">
    <td>element1</td>
    <td>element2</td>
  </tr>
  <tr data-group="4">
    <td colspan="2">Long element</td>
  </tr>
</table>

Answer 6

Javascript table row highlighting

When using CSS, it can be challenging to select a sibling element upwards in the DOM structure. However, this issue can easily be resolved with JavaScript by following the code snippet below:

$(function() {
  // Select all rows with a data-group attribute
  let rows = $("tr[data-group]");
  // Add hover functionality
  rows.hover(function over() {
    let group = $(this).data("group");
    $(this).addClass("highlight");
    $(this).siblings("tr[data-group=" + group + "]").addClass("highlight");
  }, function out() { // Remove highlight on hover out
    let group = $(this).data("group");
    $(this).removeClass("highlight");
    $(this).siblings("tr[data-group=" + group + "]").removeClass("highlight");
  });
});

table {
  border: 1px solid black;
}

td {
  padding: 0.5em 1em;
  border: 2px solid blue;
}

.highlight {
  background-color: cornflowerblue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr data-group="1">
    <td>element1</td>
    <td>element2</td>
  </tr>
  <tr data-group="1">
    <td colspan="2">Long element</td>
  </tr>
  <tr data-group="2">
    <td>element1</td>
    <td>element2</td>
  </tr>
  <tr data-group="2">
    <td colspan="2">Long element</td>
  </tr>
  <tr data-group="3">
    <td>element1</td>
    <td>element2</td>
  </tr>
  <tr data-group="3">
    <td colspan="2">Long element</td>
  </tr>
  <tr data-group="4">
    <td>element1</td>
    <td>element2</td>
  </tr>
  <tr data-group="4">
    <td colspan="2">Long element</td>
  </tr>
</table>

Answer 7

Answer №4

Are you looking to achieve this result?

I have also made corrections to the HTML markup and CSS.

#table {
  border-radius: 10px;
  border-collapse: collapse;
  width: auto;
}

#table td,
#table th {
  border: 1px solid #DDDDDD;
  padding: 8px;
}

#table tr:nth-child(4n+3) {
  background-color: #EBEBEB;
}

#table tr:nth-child(4n+4) {
  background-color: #EBEBEB;
}

#table tr:hover td,
#table tr:nth-child(2n+1):hover td,
#table tr:nth-child(2n+1):hover + tr td {
  background: #3498DB;
}

#table th {
  padding-top: 12px;
  padding-bottom: 12px;
  text-align: center;
  background-color: #333333;
  color: white;
}

<table align="center" id="table">
  <thead>
    <tr>
      <th>Vendor</th>
      <th>Model</th>
      <th>Year</th>
      <th>Source</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>vendor1</td>
      <td>model1</td>
      <td>year1</td>
      <td>source1</td>
    </tr>
    <tr>
      <td colspan="4">description1</td>
    </tr>
    <tr>
      <td>vendor2</td>
      <td>model2</td>
      <td>year2</td>
      <td>source2</td>
    </tr>
    <tr>
      <td colspan="4">description2</td>
    </tr>
    <tr>
      <td>vendor3</td>
      <td>model3</td>
      <td>year3</td>
      <td>source3</td>
    </tr>
    <tr>
      <td colspan="4">description3</td>
    </tr>
    <tr>
      <td>vendor4</td>
      <td>model4</td>
      <td>year4</td>
      <td>source4</td>
    </tr>
    <tr>
      <td colspan="4">description4</td>
    </tr>
  </tbody>
</table>

Answer 8

Are you looking to achieve this result?

I have also made corrections to the HTML markup and CSS.

#table {
  border-radius: 10px;
  border-collapse: collapse;
  width: auto;
}

#table td,
#table th {
  border: 1px solid #DDDDDD;
  padding: 8px;
}

#table tr:nth-child(4n+3) {
  background-color: #EBEBEB;
}

#table tr:nth-child(4n+4) {
  background-color: #EBEBEB;
}

#table tr:hover td,
#table tr:nth-child(2n+1):hover td,
#table tr:nth-child(2n+1):hover + tr td {
  background: #3498DB;
}

#table th {
  padding-top: 12px;
  padding-bottom: 12px;
  text-align: center;
  background-color: #333333;
  color: white;
}

<table align="center" id="table">
  <thead>
    <tr>
      <th>Vendor</th>
      <th>Model</th>
      <th>Year</th>
      <th>Source</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>vendor1</td>
      <td>model1</td>
      <td>year1</td>
      <td>source1</td>
    </tr>
    <tr>
      <td colspan="4">description1</td>
    </tr>
    <tr>
      <td>vendor2</td>
      <td>model2</td>
      <td>year2</td>
      <td>source2</td>
    </tr>
    <tr>
      <td colspan="4">description2</td>
    </tr>
    <tr>
      <td>vendor3</td>
      <td>model3</td>
      <td>year3</td>
      <td>source3</td>
    </tr>
    <tr>
      <td colspan="4">description3</td>
    </tr>
    <tr>
      <td>vendor4</td>
      <td>model4</td>
      <td>year4</td>
      <td>source4</td>
    </tr>
    <tr>
      <td colspan="4">description4</td>
    </tr>
  </tbody>
</table>

Answer 9

Answer №5

Here is the code snippet to enhance the visual appearance of a table by highlighting the next two rows when hovering over a specific row.

td, th {
  padding: 10px;
}
tr.head-row {
  background: grey;
}
tr:not(.head-row) {
  background: #fff5f5;
}

/* highlight the current row on hover*/
tr:hover:not(.head-row) {
    background: #f8b5b5;
}

/* highlight the next row when hovering over a row */
tr:hover:not(.head-row) + tr {
    background: #91cefe;
}

/* highlight the second next row when hovering over a row */
tr:hover:not(.head-row) + tr + tr {
    background: #67ace1;
}

<table style="width:100%" id="table">
  <tr class="head-row">
    <th>Firstname</th>
    <th>Lastname</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td>
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>
  <tr>
    <td>Eveas</td>
    <td>Jackson we</td>
    <td>94</td>
  </tr>
  <tr>
    <td>Everrr</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>
  <tr>
    <td>Eve ff</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>
  <tr>
    <td>Eveas</td>
    <td>Jackson we</td>
    <td>94</td>
  </tr>
  <tr>
    <td>Everrr</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>
  <tr>
    <td>Eve ff</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>
</table>

Answer 10

Here is the code snippet to enhance the visual appearance of a table by highlighting the next two rows when hovering over a specific row.

td, th {
  padding: 10px;
}
tr.head-row {
  background: grey;
}
tr:not(.head-row) {
  background: #fff5f5;
}

/* highlight the current row on hover*/
tr:hover:not(.head-row) {
    background: #f8b5b5;
}

/* highlight the next row when hovering over a row */
tr:hover:not(.head-row) + tr {
    background: #91cefe;
}

/* highlight the second next row when hovering over a row */
tr:hover:not(.head-row) + tr + tr {
    background: #67ace1;
}

<table style="width:100%" id="table">
  <tr class="head-row">
    <th>Firstname</th>
    <th>Lastname</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td>
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>
  <tr>
    <td>Eveas</td>
    <td>Jackson we</td>
    <td>94</td>
  </tr>
  <tr>
    <td>Everrr</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>
  <tr>
    <td>Eve ff</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>
  <tr>
    <td>Eveas</td>
    <td>Jackson we</td>
    <td>94</td>
  </tr>
  <tr>
    <td>Everrr</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>
  <tr>
    <td>Eve ff</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>
</table>

How can we apply a hover effect to combine two rows in a table as one using CSS?

Answer №1

Answer №2

Answer №3

Javascript table row highlighting

Answer №4

Answer №5

Similar questions

The CSS 'd' attribute for the <path> element is not functioning properly in Firefox

techniques for accessing HTML source code through an AJAX call

"Why are all the rows from my query being returned in my HTML/PHP/AJAX code

Unpredictable selection of elements displayed as links

connect to new database using mysqli_find_cat

What is the best way to ensure HTML validation during a pull request?

How can I show the localStorage value in an HTML5 template using Angular2?

Personalized sorting to match the unique rendering of cells in Material UI Data Grid

Difficulties encountered when trying to send emails on iPhone with HTML formatting and attachments

Mastering image focus with javascript: A comprehensive guide

What are the steps to designing an overlay using CSS?

JavaScript Error: Unable to determine the value of a null property

"Is it possible to rearrange the parent div's position when hovering over a child image with jquery sortable

How can I wrap content with the <li> element in a cross-browser compatible way?

Why is it important to incorporate the CSS property background-repeat: repeat; into our code?

What's the Reason Behind the Ineffectiveness of Footer Background Color in HTML CSS3?

Creating margin on a canvas with jsPDF is a simple task that can be accomplished

How to Eliminate Lower Borders from DataGrid Component in Material UI (mui)

The CSS stylesheet appears to be properly linked, however, it is not displaying correctly on the preview page

The issue of children inside a parent div not respecting the height value set to 100% when the parent div has a min