Is there a way to choose columns 2 to 6 of the row that is currently selected

Question

Is there a way to choose columns 2 to 6 of the row that is currently selected

I am looking to create a hover effect for columns 1 through 7 of a row where, when the user hovers over any column within that range, certain styles are applied to all columns in the row except for columns 1 and 7. This means that the background color should change on the current row's columns 2 through 6, while excluding columns 1 and 7:

tbody tr:hover > td:not(:first-child):not(:last-child) {
    cursor: pointer; background-color: rgb(221, 221, 221);
}

In addition, I want to have a similar hover style on columns 1 and 7 as well. To clarify, the desired behavior is as follows:

When the user hovers over row x, column 1, only that single cell should get the hover effect.
Similar to the above point, when the user hovers over row x, column 7, only that single cell should get the hover effect.
If the user hovers over row x, any column from 2-6, then all cells in row x with columns 2 through 6 should receive the hover effect.

css

Answer 1

Answer №1

Here's a straightforward solution as suggested by "Pete": css:

tbody tr:not(:first-child):not(:last-child){
    cursor: pointer;
    background-color: rgb(221, 221, 221);
}

This applies to td elements in every row.

tbody tr td:not(:first-child):not(:last-child){
    cursor: pointer;
    background-color: rgb(221, 221, 221);
}

To achieve this for cells 2 to 6 using a specific class for tds, and regular css for the first child and last child, we can use some jQuery.

$("table.mytable").find('td.a')
  .on( "mouseenter", function() {
  var allaclass = $(this).parent().find('td.a');
    allaclass.css("background-color", "red");
  })
  .on( "mouseleave", function() {
    var allaclass = $(this).parent().find('td.a');
    allaclass.css("background-color", "white");
  });

tbody tr td:first-child:hover,
tbody tr td:last-child:hover{
    cursor: pointer;
    background-color: rgb(221, 221, 221);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<table class="mytable"> 
  <tbody>
    <tr>
      <td>1</td>
      <td class="a">2</td>
      <td class="a">3</td>
      <td class="a">4</td>
      <td class="a">5</td>
      <td class="a">6</td>
      <td>7</td>
    </tr>
    <tr>
      <td>1</td>
      <td class="a">2</td>
      <td class="a">3</td>
      <td class="a">4</td>
      <td class="a">5</td>
      <td class="a">6</td>
      <td>7</td>
    </tr>
  </tbody>
</table>

Answer 2

Here's a straightforward solution as suggested by "Pete": css:

tbody tr:not(:first-child):not(:last-child){
    cursor: pointer;
    background-color: rgb(221, 221, 221);
}

This applies to td elements in every row.

tbody tr td:not(:first-child):not(:last-child){
    cursor: pointer;
    background-color: rgb(221, 221, 221);
}

To achieve this for cells 2 to 6 using a specific class for tds, and regular css for the first child and last child, we can use some jQuery.

$("table.mytable").find('td.a')
  .on( "mouseenter", function() {
  var allaclass = $(this).parent().find('td.a');
    allaclass.css("background-color", "red");
  })
  .on( "mouseleave", function() {
    var allaclass = $(this).parent().find('td.a');
    allaclass.css("background-color", "white");
  });

tbody tr td:first-child:hover,
tbody tr td:last-child:hover{
    cursor: pointer;
    background-color: rgb(221, 221, 221);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<table class="mytable"> 
  <tbody>
    <tr>
      <td>1</td>
      <td class="a">2</td>
      <td class="a">3</td>
      <td class="a">4</td>
      <td class="a">5</td>
      <td class="a">6</td>
      <td>7</td>
    </tr>
    <tr>
      <td>1</td>
      <td class="a">2</td>
      <td class="a">3</td>
      <td class="a">4</td>
      <td class="a">5</td>
      <td class="a">6</td>
      <td>7</td>
    </tr>
  </tbody>
</table>

Answer 3

Answer №2

Utilize the hover effect on the parent element.

tbody:hover tr:not(:nth-child(1)):not(:nth-child(7)) {
    cursor: pointer;
    background-color: rgb(221, 221, 221);
}

tbody:hover tr:not(:nth-child(1)):not(:nth-child(7)) {
    cursor: pointer;
    background-color: rgb(221, 221, 221);
}

<table>
  <tbody>
    <tr>
      <td>1</td>
    </tr>
    <tr>
      <td>2</td>
    </tr>
    <tr>
      <td>3</td>
    </tr>
    <tr>
      <td>4</td>
    </tr>
    <tr>
      <td>5</td>
    </tr>
    <tr>
      <td>6</td>
    </tr>
    <tr>
      <td>7</td>
    </tr>
  </tbody>
</table>

Answer 4

Utilize the hover effect on the parent element.

tbody:hover tr:not(:nth-child(1)):not(:nth-child(7)) {
    cursor: pointer;
    background-color: rgb(221, 221, 221);
}

tbody:hover tr:not(:nth-child(1)):not(:nth-child(7)) {
    cursor: pointer;
    background-color: rgb(221, 221, 221);
}

<table>
  <tbody>
    <tr>
      <td>1</td>
    </tr>
    <tr>
      <td>2</td>
    </tr>
    <tr>
      <td>3</td>
    </tr>
    <tr>
      <td>4</td>
    </tr>
    <tr>
      <td>5</td>
    </tr>
    <tr>
      <td>6</td>
    </tr>
    <tr>
      <td>7</td>
    </tr>
  </tbody>
</table>

Is there a way to choose columns 2 to 6 of the row that is currently selected

Answer №1

Answer №2

Similar questions

What is the best way to send props to a styled component without needing to convert them to transient props beforehand

Looking to transform an HTML table into a stylish CSS layout complete with a form submission button?

Change the size of a particular div upon hovering over another element

Place the button inside the form following another block element

I am interested in designing a navigation bar with varying background and hover colors for each individual block

Position the paper-icon-button so that it is aligned to the top-right corner of the scaffold

Animating Elements with CSS and HTML

Tips for removing the default hover and click effects from a Material-UI CardActionArea

The arrows on the Slick Slider appear cropped on ios devices like the iphone 8, however, they display perfectly when tested on Chrome and Firefox

Placing a pseudoelement amidst the track and thumb of a range input type

Guide on how to organize a list into three columns using a single ul tag

Strategies for limiting a table row in JavaScript or jQuery without utilizing the style tag or class attribute for that specific row

What is the process for extracting content from CSS comments or annotations in a stylesheet?

Adjust the size of an HTML image for printing using a JavaScript window.print() function

The hover drop-down menu in CSS is not appearing in the correct position

What causes my absolutely positioned element to disappear when using overflow-x: hidden?

I can't seem to get the button to function properly, and it's really

What is the best method for flipping the sequence of elements in media queries?

Crafting CSS for styling input type file elements

What should we name this particular style of navigation tab menu?