JSFiddle - React, Tailwind, and code Playground

HTML

<div id='container'>
        CSS ONLY!
        <br />
        <!-- Info DIVS -->
        <div class="info info1">Info 1</div>
        <div class="info info2">Info 2</div>
        <div class="info info3">Info 3</div>

        <!-- Info Tables -->
        <table class="table1"><tr><td>Table 1</td></tr></table>
        <table class="table2"><tr><td>Table 2</td></tr></table>
        <table class="table3"><tr><td>Table 3</td></tr></table>
    <div>

CSS

table {
    display: none;
}

div > .info1:hover ~ .table1,
div > .info2:hover ~ .table2,
div > .info3:hover ~ .table3 {
    display: table;
}

div > div {
    cursor: pointer;
    display: inline-block;
    margin: 10px;
}

JavaScript

(function(){
    var container = document.getElementById('container');
    var tables = document.getElementsByTagName('table');
    var currentlyVisible = null;

    container.addEventListener('mouseover', function(e) {
        var idx;
        if (e.target.hasAttribute('data-idx')) {
            if (currentlyVisible) {
                currentlyVisible.style.display = 'none';
            }
            idx = parseInt(e.target.getAttribute('data-idx'), 10) - 1
            currentlyVisible = tables[idx];
            currentlyVisible.style.display = 'block';
        }
    });
    container.addEventListener('mouseout', function(e) {
        if (currentlyVisible) {
            currentlyVisible.style.display = 'none';
        }
    });
}())