CSS - выберите столбцы 2-6 текущей строки?

Question

Я хочу эффект зависания, поэтому, когда пользователь наводится на любые столбцы между 1 и 7 строки, эти стили применяются ко всем столбцам в строке, кроме столбцов 1 и 7 (поэтому цвет фона изменяется в текущей строке, столбцы 2 -6, но не в колонках 1 и 7):

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

Однако, у меня есть подобный стиль парения на колонках 1 и 7. Таким образом, чтобы уточнить, желаемое поведение:

1. Пользователь зависает над строкой x, столбец 1 - эта одиночная ячейка получает эффект наведения.
2. Пользователь зависает над строкой x, столбец 7 - эта одиночная ячейка получает эффект наведения.
3. Пользователь наводит курсор на строку x, любой столбец из 2-6, ВСЕ ячейки в строке x, столбцы 2-6 получают эффект зависания.

Answer 1

Простое решение как "Пита" прокомментировал: CSS:

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

на тд elemenst для каждой строки

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

Таким образом, мы должны использовать некоторые JQuery для АРХИВ, что для клеток от 2 до 6 используйте некоторые классы и обычные css для первого ребенка и последнего ребенка

$("table.mytable").find('td.a') 
 
    .on("mouseenter", function() { 
 
    \t 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

Нанести парить родителю.

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>