JSFiddle - React, Tailwind, and code Playground

HTML

<table id="sample">
  <thead>
    <tr>
      <th>MENU</td>
      <th class="mail-header">受信フォルダ</td>
      <th class="mail-header">送信フォルダ</td>
      <th class="mail-header">削除フォルダ</td>
    </tr>
  <thead>
  <tbody>
    <tr>
      <td></td>
      <td class="mail-body"><span aria-hidden="true">・メール表示<br />・削除</span></td>
      <td class="mail-body"><span aria-hidden="true">・メール表示<br />・削除</span></td>
      <td class="mail-body"><span aria-hidden="true">・メール表示<br />・削除</span></td>
    </tr>
    <tr>
      <td colspan="4"></td>
    </tr>
  </tbody>
</table>

 <ul>
  <li><a href="https://teratail.com/questions/16940">Javascriptについて質問です。(16940)｜teratail</a></li>
</ul>

CSS

table {
  border-collapse: collapse;
}

td, th {
  border: solid 1px black;
}

.mail-body>[aria-hidden=true] {
  visibility: hidden;
}

JavaScript

'use strict';
(function () {
  function handleMouseoverout (event) {
    switch (event.type) {
      case 'mouseover':
        var td = event.target,
            classList = td.classList;

        if (classList.contains('mail-header')) {
          td.parentNode.parentNode.parentNode.tBodies[0].rows[0].cells[td.cellIndex].firstChild.setAttribute('aria-hidden', 'false');
        } else if (classList.contains('mail-body')) {
          td.firstChild.setAttribute('aria-hidden', 'false');
        }
        break;
      case 'mouseout':
        var td = event.target;
        if (!td.classList.contains('mail-body') || td !== event.relatedTarget.parentNode) {
          for (var i = 0, span = event.currentTarget.querySelectorAll('[aria-hidden=false]'), l = span.length; i < l; ++i) {
            span[i].setAttribute('aria-hidden', 'true');
          }
        }
        break;
    }
  }

  function init () {
    var table = document.getElementById('sample');

    table.addEventListener('mouseover', handleMouseoverout, false);
    table.addEventListener('mouseout', handleMouseoverout, false);
  }

  init();
}());