JSFiddle - React, Tailwind, and code Playground

by incutonez

HTML

<body>
    <div id="parent">
        <div id="leftChild">
            <div>left child</div>
            <div class="row row1">some content</div>
            <div class="row row2">other content</div>
            <div class="row row3">more content</div>
        </div>
        <div id="rightChild">
            <div>right child</div>
            <div class="row row1">
                <span class="col1">column 1 content</span>
                <span class="col2">column 2 content</span>
                <span class="col3">column 3 content</span>
                <span class="col4">column 4 content</span>
                <span class="col5">column 5 content some really long content to trigger scrolling just for the purpose of this example</span>
            </div>
            <div class="row row2">
                <span class="col1">column 1 content</span>
                <span class="col2">column 2 content</span>
                <span class="col3">column 3 content</span>
                <span class="col4">column 4 content</span>
                <span class="col5">column 5 content some really long content to trigger scrolling just for the purpose of this example</span>
            </div>
            <div class="row row3">
                <span class="col1">column 1 content</span>
                <span class="col2">column 2 content</span>
                <span class="col3">column 3 content</span>
                <span class="col4">column 4 content</span>
                <span class="col5">column 5 content some really long content to trigger scrolling just for the purpose of this example</span>
            </div>
        </div>
    </div>
</body>

CSS

.row:hover, .hover {
	background-color: lightblue;
}

.row {
	height: 50px;
	padding: 5px;
	white-space: nowrap;
}

.row > span {
	display: inline-block;
	border: 5px solid black;
}

#leftChild, #rightChild {
	float: left;
}

#rightChild {
	width: 300px;
	overflow: auto;
}

#rightChild .row {
	display: inline-block;
}

#leftChild {
    border-right: 5px solid red;
}
}

JavaScript

/*var parent = document.getElementById('parent');
	parent.onmouseenter = function(event) {
		console.log(event.target);
	};
	parent.onmouseleave = function(event) {
		console.log(event.target);
	};*/
	
	var rows = document.getElementsByClassName('row');
	for (var i = 0; i < rows.length; i++) {
		rows[i].onmouseenter = function(event) {
			var splits = event.target.className.split(" ");
			var elems = document.getElementsByClassName(splits[splits.length - 1]);
			for (var j = 0; j < elems.length; j++) {
				elems[j].className += " hover";
			}
		};
		
		rows[i].onmouseleave = function(event) {
			var hovers = document.getElementsByClassName('hover');
			var len = hovers.length;
			for (var j = 0; j < len; j++) {
				hovers[0].className = hovers[0].className.replace(/\shover(\s|$)/, '');
			}
		};
	}