JSFiddle - React, Tailwind, and code Playground

by Tim BĂĽthe

HTML

<table id="myTable">
    <tr>
        <td>1.1</td>
        <td>1.2</td>
        <td>1.3</td>
        <td>1.4</td>
        <td>1.5</td>
        <td>1.6</td>
        <td>1.7</td>
        <td>1.8</td>
    </tr>
    <tr>
        <td>2.1</td>
        <td>2.2</td>
        <td>2.3</td>
        <td>2.4</td>
        <td>2.5</td>
        <td>2.6</td>
        <td>2.7</td>
        <td>2.8</td>
    </tr>
    <tr>
        <td>3.1</td>
        <td>3.2</td>
        <td>3.3</td>
        <td>3.4</td>
        <td>3.5</td>
        <td>3.6</td>
        <td>3.7</td>
        <td>3.8</td>
    </tr>
</table>

CSS

td {
    border: 1px solid black;
    cursor: pointer;
    width: 50px;
}

JavaScript

$('#myTable').on('mouseenter', 'td', function () {
  $(this).css("background-color", 'red');
});

$('#myTable').on('mouseleave', 'td', function () {
  $(this).css("background-color", 'white');
});