How to hover <td> that contain specific data

Issue

I need to display red background color in <td> that I hovered. For example, if I hovered 'Apple', then 'Apple' in all <td> shall be hovered same color as well. Currently can only hover one <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

Solution

You can do that with the help of jQuery. Try running the following snippet.

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

Answered By - Viira