Hover td speeds up background color change from hover tr

Question

I have a generic class that I use for table rows that changes background-colorits td when they freeze. I use it throughout 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 with rowspan.

In the end, I want to get rid of changing the background color when I hover over rowspan td lines:

When I am on Business Fieldstd, the hover effect is applied to the line new column1, but when I find on the second line, it does not apply to td with rowspan. I want to fix this by removing the hover action from the first td.

How can I avoid the hover effect on rowspan td, but save it for table rows (separate captions - new column1, new column2)?

CSS?

Answer 1

CSS :not() <td> rowspan, CSS - reset , :

.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

CSS :not() , reset background-color :

.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.

---

, , , td tr

, tr, td ( td[rowspan])

CSS

CSS , / ().

Pure CSS, pointer-events: none; td[rowspan], .

№ 3.

JavaScript , td[rowspan].

:

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

№ 4.

Answer 2

, :

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

Answer 3

. . "TD" .

$(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/