时间戳

首页 > 解决方案 > CSS 表格 - 鼠标悬停在 3 个表格上的颜色效果

javascript - CSS 表格 - 鼠标悬停在 3 个表格上的颜色效果

问题描述

我有 3 张桌子，里面有信息。在将鼠标悬停在列上时，行会被着色。这对每个表都非常适用，但我希望这样：

如果我的鼠标在表 1 中的字段 3 上，不仅要使表 1 中的字段 3 着色，还要在表 2 和表 3 中着色。

table {
  overflow: hidden;
}

tr:hover {
  background-color: #ffa;
}

td,
th {
  position: relative;
  width: 50px;
  height: 20px;
  text-align: center;
}

td:hover::after,
th:hover::after {
  content: "";
  position: absolute;
  background-color: #ffa;
  left: 0;
  top: -5000px;
  height: 10000px;
  width: 100%;
  z-index: -1;
}
Table 1
<table border=1>
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
  </tr>
  <tr>
    <td>4</td>
    <td>mouse over on this field</td>
    <td>6</td>
  </tr>
  <tr>
    <td>7</td>
    <td>8</td>
    <td>9</td>
  </tr>
  <tr>
    <td>10</td>
    <td>11</td>
    <td>12</td>
  </tr>
</table>

Table 2
<table border=1>
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
  </tr>
  <tr>
    <td>4</td>
    <td>should also color this field</td>
    <td>6</td>
  </tr>
  <tr>
    <td>7</td>
    <td>8</td>
    <td>9</td>
  </tr>
  <tr>
    <td>10</td>
    <td>11</td>
    <td>12</td>
  </tr>
</table>

Table 3
<table border=1>
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
  </tr>
  <tr>
    <td>4</td>
    <td>and this one</td>
    <td>6</td>
  </tr>
  <tr>
    <td>7</td>
    <td>8</td>
    <td>9</td>
  </tr>
  <tr>
    <td>10</td>
    <td>11</td>
    <td>12</td>
  </tr>
</table>

标签： javascriptjqueryhtmlcss

解决方案

使用 jQuery index()，您可以获取悬停单元格的行索引和列索引，并将一个类添加到其他表中的相应单元格

小提琴演示

const $tables = $('table')

$('td, th').hover(function() {
  const $cell = $(this),
    $row = $cell.parent(),
    $table = $cell.closest('table'),
    cIdx = $cell.index(),
    rIdx = $row.index();

  $tables.not($table).each(function() {
    $(this).find('tr').eq(rIdx).children().eq(cIdx).addClass('activeCell');
  });

}, function() {
  $('.activeCell').removeClass('activeCell')

})
table {
  overflow: hidden;
}

.activeCell,
tr:hover {
  background-color: #ffa;
}

td,
th {
  position: relative;
  width: 50px;
  height: 20px;
  text-align: center;
}

td:hover::after,
th:hover::after {
  content: "";
  position: absolute;
  background-color: #ffa;
  left: 0;
  top: -5000px;
  height: 10000px;
  width: 100%;
  z-index: -1;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Table 1
<table border=1>
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
  </tr>
  <tr>
    <td>4</td>
    <td>mouse over on this field</td>
    <td>6</td>
  </tr>
  <tr>
    <td>7</td>
    <td>8</td>
    <td>9</td>
  </tr>
  <tr>
    <td>10</td>
    <td>11</td>
    <td>12</td>
  </tr>
</table>

Table 2
<table border=1>
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
  </tr>
  <tr>
    <td>4</td>
    <td>should also color this field</td>
    <td>6</td>
  </tr>
  <tr>
    <td>7</td>
    <td>8</td>
    <td>9</td>
  </tr>
  <tr>
    <td>10</td>
    <td>11</td>
    <td>12</td>
  </tr>
</table>

Table 3
<table border=1>
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
  </tr>
  <tr>
    <td>4</td>
    <td>and this one</td>
    <td>6</td>
  </tr>
  <tr>
    <td>7</td>
    <td>8</td>
    <td>9</td>
  </tr>
  <tr>
    <td>10</td>
    <td>11</td>
    <td>12</td>
  </tr>
</table>

推荐阅读