如何悬停包含特定数据的 <td>

Question

我需要在我悬停的<td> 中显示红色背景色。例如，如果我将鼠标悬停在“Apple”上，那么所有<td> 中的“Apple”也应悬停在相同的颜色上。目前只能悬停一个<td>Apple</td>。

table {
margin: 2rem;
}

th, td {
border: 1px solid #333;
}

td:hover{
background-color:red
}

html {
font-size: 24px;
}

<h3>Table 1</h3>

<table>
<tr>
<th>Header 1.1</th>
<th>Header 1.2</th>
<th>Header 1.3</th>
</tr>
<tr>
<td>Apple</td>
<td>Orange</td>
<td>Lemon</td>
</tr>
<tr>
<td>Orange</td>
<td>Lemon</td>
<td>Apple</td>
</tr>
</table>

Codepen

Answer 1

您可以在jQuery 的帮助下做到这一点。尝试运行以下 sn-p。

$('.apple').hover(
  function(){
        $('.apple').css({"background":"red"});
  },function(){
        $('.apple').css({"background":"white"});
  })
  
$('.orange').hover(
  function(){
        $('.orange').css({"background":"orange"});
  }
  ,function(){
        $('.orange').css({"background":"white"});
  }
)

$('.lemon').hover(
  function(){
        $('.lemon').css({"background":"yellow"});
  }, function(){
        $('.lemon').css({"background":"white"});
})

html {
  font-size: 24px;
}

table {
  margin: 2rem;
}

th, td {
  border: 1px solid #333;
}

td span {
  display: block;
}

td:hover span.apple {
  background-color:red
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h3>Table 1</h3>

<table>
  <tr>
    <th>Header 1.1</th>
    <th>Header 1.2</th>
    <th>Header 1.3</th>
  </tr>
  <tr>
    <td><span class="apple">Apple</span></td>
    <td><span class="orange">Orange</span></td>
    <td><span class="lemon">Lemon</span></td>
  </tr>
  <tr>
    <td><span class="orange">Orange</span></td>
    <td><span class="lemon">Lemon</span></td>
    <td><span class="apple">Apple</span></td>
  </tr>
</table>

Answer 2

这不能仅使用 HTML 和 CSS 来完成，因为 CSS 不知道内容。

使用 Javascript，您可以设置 CSS 变量，这些变量反过来会设置单元格的背景。

这个 sn-p 遍历每个 td 元素并设置样式 background: var(--name of fruit) 例如所有苹果单元格都有 style="background: var(--apple);"添加到他们。然后，当 td 悬停时，JS 将 --apple 设置为红色，当鼠标移出时，将其设置为透明。

这样所有带有背景的 td: var(--apple) 都会被突出显示。

每次悬停时无需遍历表格中的所有单元格，您可以通过在开始时设置所有内容来做到这一点。

function setHighlight(e) {
  table.style.setProperty('--' + e.target.textContent, 'red');
}

function removeHighlight(e) {
  table.style.setProperty('--' + e.target.textContent, 'transparent');
}
const table = document.querySelector('table');
const tds = document.querySelectorAll('td');
tds.forEach(td => {
  td.addEventListener('mouseover', setHighlight);
  td.style.backgroundColor = 'var(--' + td.textContent + ')';
});
tds.forEach(td => {
  td.addEventListener('mouseout', removeHighlight);
});

<h3>Table 1</h3>

<table>
  <tr>
    <th>Header 1.1</th>
    <th>Header 1.2</th>
    <th>Header 1.3</th>
  </tr>
  <tr>
    <td>Apple</td>
    <td>Orange</td>
    <td>Lemon</td>
  </tr>
  <tr>
    <td>Orange</td>
    <td>Lemon</td>
    <td>Apple</td>
  </tr>
</table>

Answer 3

在每个 td 中添加一个类并使用 JQuery。 请参阅下面的示例。

$(document).ready(function(){
  $("td.apple").hover(function(){
    $(".apple").css("background-color", "red");
    }, function(){
    $(".apple").css("background-color", "white");
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tr>
    <th>Company</th>
    <th>Contact</th>
    <th>Country</th>
  </tr>
  <tr>
    <td>Alfreds Futterkiste</td>
    <td class="apple">Apple</td>
    <td class="apple">Apple</td>
  </tr>
  <tr>
    <td>Centro comercial Moctezuma</td>
    <td class="apple">Apple</td>
    <td>Mexico</td>
  </tr>
  <tr>
    <td>Ernst Handel</td>
    <td>Roland Mendel</td>
    <td class="apple">Apple</td>
  </tr>
  <tr>
    <td>Island Trading</td>
    <td>Helen Bennett</td>
    <td>UK</td>
  </tr>
  <tr>
    <td>Laughing Bacchus Winecellars</td>
    <td>Yoshi Tannamuri</td>
    <td>Canada</td>
  </tr>
  <tr>
    <td>Magazzini Alimentari Riuniti</td>
    <td>Giovanni Rovelli</td>
    <td>Italy</td>
  </tr>
</table>

Answer 4

如果您不想添加额外的 ID 并将 jquery 作为依赖项添加到您的代码中，您可以使用 vanilla JS

// Get all TDs
const tds = Array.from(document.querySelectorAll("td"));

tds.map(td => {
  
  // bind mouseenter to TDs to paint BG
  td.addEventListener("mouseenter", (event) => {
    const text = event.target.textContent;
    
    // paint TDs with same text
    tds.map(td => {
      if(td.textContent === text) {
        td.style.background = 'red';
      }
    });

  });
  
  // bind mouseleave to TDs to remove BG
  td.addEventListener("mouseleave", (event) => {
   
    tds.map(td => {
      td.style.background = 'transparent';
    });
  })
});

工作示例：https://codepen.io/ipasha/pen/eYRKxpP

Answer 5

table {
  margin: 2rem;
}

th, td {
  border: 1px solid #333;
}

.apple:hover{
  background-color:red
}

html {
  font-size: 24px;
}

<h3>Table 1</h3>

<table>
  <tr>
    <th>Header 1.1</th>
    <th>Header 1.2</th>
    <th>Header 1.3</th>
  </tr>
  <tr>
    <td class="apple">Apple</td>
    <td>Orange</td>
    <td>Lemon</td>
  </tr>
  <tr>
    <td>Orange</td>
    <td>Lemon</td>
    <td class="apple">Apple</td>
  </tr>
</table>

Answer 6

这是您可以尝试的一种方法：

html {
  font-size: 24px;
}

table {
  margin: 2rem;
}

th, td {
  border: 1px solid #333;
}

td span {
  display: block;
}

td:hover span.apple {
  background-color:red
}

<h3>Table 1</h3>

<table>
  <tr>
    <th>Header 1.1</th>
    <th>Header 1.2</th>
    <th>Header 1.3</th>
  </tr>
  <tr>
    <td><span class="apple">Apple</span></td>
    <td><span>Orange</span></td>
    <td><span>Lemon</span></td>
  </tr>
  <tr>
    <td><span>Orange</span></td>
    <td><span>Lemon</span></td>
    <td><span class="apple">Apple</span></td>
  </tr>
</table>