如何悬停包含特定数据的 <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

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 2

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

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>

Answer 3

您可以在 jQuery 的帮助下做到这一点。尝试运行以下代码段。

$('.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 4

在每个td中添加一个class并使用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 5

如果您不想添加额外的 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 6

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

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

此代码段遍历每个 td 元素并设置样式背景：var(--水果名称) 例如，所有苹果单元格都具有样式="背景：var(--apple);"添加到他们。然后当 td 悬停时，JS 将 --apple 设置为红色，当鼠标移出时将其设置为透明。

这样所有具有背景的 tds：var(--apple) 都会突出显示。

每次悬停时都不需要遍历 table 中的所有单元格，您可以在开始时将所有内容都设置一次。

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>

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

How to hover <td> that contain specific data

html

css

jquery

hover