Appear on hover

Appear on hover

by sandipchitale

HTML

<h1>Appear on hover</h1>
<table>
  <tr>
    <td>_</td>
    <td>____________________</td>
    <td>___</td>
    <td>____________________</td>
    <td>_</td>
  </tr>
  <tr>
    <td>|</td>
    <td align="right">
      <span class="hoverright" style="display: inline-block;">
        <span title="Shrink left panel by 1">&lt;</span>
        <span title="Collapse left panel">|&lt;</span>
      </span>
    </td>
    <td>&nbsp;|&nbsp;</td>
    <td class="hoverleft">
      <span title="Shrink right panel by 1">&gt;</span>
      <span title="Collapse right panel">&gt;|</span>
    </td>
    <td>|</td>
  </tr>
  <tr>
    <td>|</td>
    <td></td>
    <td>&nbsp;|&nbsp;</td>
    <td></td>
    <td>|</td>
  </tr>
  <tr>
    <td>|</td>
    <td></td>
    <td>&nbsp;|&nbsp;</td>
    <td></td>
    <td>|</td>
  </tr>
  <tr>
    <td>|</td>
    <td></td>
    <td>&nbsp;|&nbsp;</td>
    <td></td>
    <td>|</td>
  </tr>
  <tr>
    <td>|</td>
    <td></td>
    <td>&nbsp;|&nbsp;</td>
    <td></td>
    <td>|</td>
  </tr>
  <tr>
    <td>|</td>
    <td></td>
    <td>&nbsp;|&nbsp;</td>
    <td></td>
    <td>|</td>
  </tr>
  <tr>
    <td>|</td>
    <td></td>
    <td>&nbsp;|&nbsp;</td>
    <td></td>
    <td>|</td>
  </tr>
  <tr>
    <td>|</td>
    <td></td>
    <td>&nbsp;|&nbsp;</td>
    <td></td>
    <td>|</td>
  </tr>
  <tr>
    <td>|</td>
    <td></td>
    <td>&nbsp;|&nbsp;</td>
    <td></td>
    <td>|</td>
  </tr>
  <tr>
    <td>_</td>
    <td>____________________</td>
    <td>___</td>
    <td>____________________</td>
    <td>_</td>
  </tr>
</table>

CSS

table * {
   font-family: monospace;
}
.hoverleft > span, .hoverright > span {
  padding-left: 8px;
  padding-right: 8px;
  cursor: pointer;
  font-weight: 900;
}

.hoverright :nth-child(2) {
  opacity: 0.0;
  float: left;
}

.hoverright :nth-child(1):hover +:nth-child(2) {
  opacity: 1.0;
  animation: fadein 2s;
}

.hoverright :nth-child(2):hover {
  opacity: 1.0;
  animation: fadein 2s;
}

.hoverleft :nth-child(2) {
  opacity: 0.0;
}

.hoverleft :nth-child(1):hover + :nth-child(2) {
  opacity: 1.0;
  animation: fadein 2s;
}

.hoverleft :nth-child(2):hover {
  opacity: 1.0;
  animation: fadein 2s;
}

@keyframes fadein {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}