禁用在特定小区上的悬停

Question

当用户将鼠标悬停在整条线上时，我想避免将鼠标悬停在我桌上的4个中间小区上。

初始状态：

悬停状态：

预期结果：悬停时将4个中间细胞保持在初始状态。

HTML：

<tr class="gradeX odd" role="row">
   <td class="" tabindex="0"> CD-5-CZ-TOS-110.21 </td>
   <td class=""> OS6450-P24 </td>
   <td class="supportedClass"> Supported </td>
   <td class="supportedClass"> Supported </td>
   <td class="notSupportedClass"> Not supported </td>
   <td class="mediumClass"> Within 90 days of end of support </td>
   <td class=""> 2c:fa:a2:2e:15:c4 </td>
   <td class=""> T5184190 </td>
   <td class=""> 6.7.2.49.R01 </td>
</tr>

CSS（bootstrap）

.table-hover>tbody>tr:hover, .table-hover>tbody>tr:hover>td {
    background: #f3f4f6!important;
}

.table-hover>tbody>tr:hover, .table>tbody>tr.active>td, .table>tbody>tr.active>th, .table>tbody>tr>td.active, .table>tbody>tr>th.active, .table>tfoot>tr.active>td, .table>tfoot>tr.active>th, .table>tfoot>tr>td.active, .table>tfoot>tr>th.active, .table>thead>tr.active>td, .table>thead>tr.active>th, .table>thead>tr>td.active, .table>thead>tr>th.active {
    background-color: #eef1f5;
}

Answer 1

为中间td定义一个新类，名称为“holdInitial”，在css中，您可以在定义悬停效果的查询中使用::not(.holdInitial)预处理器。

Answer 2

在不使用循环之前使用class不是一个好主意，所以我已经提出了一个解决方案，它将只选择第一个和最后三个元素。

＆＃13;

＆＃13;

.table-hover > tbody > tr:hover > td:nth-child(-n+5):not(:nth-child(n+2)), .table-hover > tbody > tr:hover > td:nth-child(n+6) {
    background: red !important;
}

＆＃13;

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<table class="table table-striped table-hover">
	<thead>
		<tr>
			<th>Column</th>
			<th>Column</th>
			<th>Column</th>
			<th>Column</th>
			<th>Column</th>
			<th>Column</th>
			<th>Column</th>
			<th>Column</th>
		</tr>
	</thead>
	<tbody>
			<tr>
				<td>Column</td>
				<td class="bg-danger">Column</td>
				<td class="bg-success">Column</td>
				<td class="bg-info">Column</td>
				<td class="bg-warning">Column</td>
				<td>Column</td>
				<td>Column</td>
				<td>Column</td>
			</tr>
			<tr>
				<td>Column</td>
				<td class="bg-danger">Column</td>
				<td class="bg-success">Column</td>
				<td class="bg-info">Column</td>
				<td class="bg-warning">Column</td>
				<td>Column</td>
				<td>Column</td>
				<td>Column</td>
			</tr>
			<tr>
				<td>Column</td>
				<td class="bg-danger">Column</td>
				<td class="bg-success">Column</td>
				<td class="bg-info">Column</td>
				<td class="bg-warning">Column</td>
				<td>Column</td>
				<td>Column</td>
				<td>Column</td>
			</tr>
	</tbody>
</table>

＆＃13;

＆＃13;

＆＃13;