悬停td从hover tr中转义背景颜色变化

Question

I have a general class that I use for table rows which changes the background-color of it's td 's when they are hovered. I'm using it all over my application.

.enty-table {
    &:hover > td {
        background-color: lightblue;
    }
}

 <table class="table table-bordered">
     <thead>
         <tr>
             <th></th>
             <th>Name</th>
             <th>Min Length</th>
             <th>Max Length</th>
             <th>Min Value</th>
             <th>Max Value</th>
             <th>Regular Expr</th>
             <th>Default Value</th>
         </tr>
     </thead>
     <tbody>
         <tr class="enty-table">
             <!-- I want the hover on the folowing td to escape the hover effect added with enty-table class on tr -->
             <td class="columnCategory">Business Fields</td>
             <td><strong>new column1</strong></td>
             <td><span></span></td>
             <td><span></span></td>
             <td><span></span></td>
             <td><span></span></td>
             <td><span></span></td>
             <td><span></span></td>
          </tr>
          <tr class="enty-table">
             <td><strong>new column2</strong></td>
             <td><span></span></td>
             <td><span></span></td>
             <td><span></span></td>
             <td><span></span></td>
             <td><span></span></td>
             <td><span></span></td>
          </tr>
      </tbody>
 </table>

Now, I have a special table (2 dimensional) where in the first column I have td 's with rowspan.

Eventually I want to get rid of background-color change when I hover the rowspan td :

When I hover on the Business Fields td the hover effect is applied for the new column1 row, but when I hover on the second row it is not applied on the td with rowspan . I'm want to fix that by removing the hover action from the first td .

How can I escape the hover effect on the rowspan td , but keep it for the table rows (the individual subrows - new column1 , new column2 )?

Can it only be done from CSS?

Answer 1

You could use CSS :not() pseudo-class to ignore the <td> has rowspan attribute, then use CSS general sibling selectors to reset the background color of table cells, as follows:

.enty-table {
  &:hover > td:not([rowspan]) {
    background-color: lightblue;
  }

  & > td[rowspan]:hover ~ td {
    background-color: #fff; /* Reset the background of next cells */
  }
}

JSBin Demo .

Update

If using CSS :not() is not an option, you could reset the background-color of the first cell as follows:

.enty-table {
  &:hover > td {
    background-color: lightblue;
    /* Reset the background color of td[rowspan] */
    &[rowspan] {
      background-color: #fff;
    }
  }

  & > td[rowspan]:hover ~ td {
    background-color: #fff; /* Reset the background */
  }
}

JSBin Demo #2 .

---

Basically what I need is when I hover that td there will be nothing applied on the tr

Actually, you're hovering the tr itself, not only that td (refers to td[rowspan] )

Is it possible to go higher in the tree structure from CSS

CSS is cascading, there's no backward and/or parent selector ( yet ).

As a Pure CSS way, you could use pointer-events: none; on the td[rowspan] to prevent from triggering the mouse event on that element.

Working Demo #3 .

Otherwise, you need to use JavaScript to change all table-cells on hovering each one excluding td[rowspan] .

For instance:

$('.enty-table').children('td:not(td[rowspan])').hover(function() {
  $(this).siblings(':not(td[rowspan])').addBack().addClass('hover');
}, function() {
  $(this).parent().children('td').removeClass('hover');
});

Working Demo #4 .

Answer 2

A couple of things you could do:

.enty-table {
    & td:hover {
        background-color: lightgrey;
    }
}
.enty-table {
    & tr:hover {
        background-color: lightgrey;
    }
}

Answer 3

Please try it. Use class tree and change style using selected object. It will work fine for all "TD"s using proper tree pattern.

$(document).ready(function(){
  $(".enty-table tr td").hover(function(){
    $(this).css("background-color","yellow");
  });
  $(".enty-table tr td").mouseout(function(){
    $(this).css("background-color","lightgray");
  });
});

http://jsfiddle.net/vDD5p/