JSFiddle - React, Tailwind, and code Playground

by krasimir

HTML

<table><tr>
<td class="table-column">
    column1
</td>
<td class="table-column">
    column2
</td>
<td class="table-column">
    column3
</td>
</tr></table>

<div class="textbox">Show text</div>
<div class="textbox">Show text</div>
<div class="textbox">Show text</div>

CSS

.table-column {
    border: solid 1px #999;
}

JavaScript

var columns = document.querySelectorAll(".table-column");
var textboxes = document.querySelectorAll(".textbox");
for(var i=0; column=columns[i]; i++) {
    column.addEventListener("mouseover", function() {
        replaceText("Hidden text");
    });
    column.addEventListener("mouseout", function() {
        replaceText("Show text");
    });
}
var replaceText = function(str) {
    for(var i=0; field=textboxes[i]; i++) {
        field.innerHTML = str;
    }
}