JSFiddle - React, Tailwind, and code Playground

by ozzon91

HTML

<ol id='list'>
    <li><a class='lin' href="#">item 1</a></li>
    <li><a class='lin' href="#">item 1</a></li>
    <li><a class='lin' href="#">item 1</a></li>
    <li><a class='lin' href="#">item 1</a></li>
    <li><a class='lin' href="#">item 1</a></li>
    <li><a class='lin' href="#">item 1</a></li>
    <li><a class='lin' href="#">item 1</a></li>
    <li><a class='lin' href="#">item 1</a></li>
    <li><a class='lin' href="#">item 1</a></li>
    <li><a class='lin' href="#">item 1</a></li>
    <li><a class='lin' href="#">item 1</a></li>
    <li><a class='lin' href="#">item 1</a></li>
    <li><a class='lin' href="#">item 1</a></li>
    <li><a class='lin' href="#">item 1</a></li>
    <li><a class='lin' href="#">item 1</a></li>
</ol>

CSS

ol li {
    background-color: #ccc;
    width: 150px;
    height: 30px;
    margin-top: 10px;
    padding: 5px 5px 5px 40px;
}

JavaScript

var ul = document.getElementById('list');
var li = ul.getElementsByTagName('li');
var lin = document.getElementsByClassName('lin');

for (var i = 0; i <= li.length - 1; i++) {
    li[i].onmouseover = function() {
        lin[i].style.visibility = 'hidden';
    }
    li[i].onmouseout = function() {
        lin[i].style.visibility = 'visible';
    }
}