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

Mobile devices consistently experiencing issues with JavaScript generated elements overlapping

The application of document.body.style.backgroundColor is not compatible with an external CSS style sheet

Updating the value of an Angular select on change is not being reflected

Mobile Device Centering Problem with Bootstrap Cards

Use jQuery to create a toggle effect with unique attributes and incorporate AJAX functionality

Achieve seamless transitions between animations when hovering with CSS3

Exploring innovative CSS/Javascript techniques for creating intricate drawings

Cannot Display CSS Background Image Locally

How can I search for a particular string in JavaScript?

Using the arrow keys to navigate through a list of items without using jQuery

Is there any advantage to placing buttons within an HTML form?

Customize the default getstream component styles in a NextJS Component

Displaying an interactive 2D floorplan in a web browser with the use of html5 and javascript

Deactivate the button when the text box is verified

There was a lack of dynamic content on the webpage when using the view/template engine (Handlebars)

Using rowspan to display JSON data in AngularJS

It is not possible for ReactJS to disable a button that has been created dynamically

Is there a way to execute Javascript in Django without revealing static files?

javascript strange behavior

Is there a way to ensure certain items are displayed on different lines?