javascript - 列出悬停时更改类的项目

Question

所以我有以下代码HTML

<ul id="list-group" class="list-group">
                <li class="list-item"><a href="#"><i class="fa fa-twitter"></i><span class="span-social">Twitter</span></a></li>
                <li class="list-item"><a href="#"><i class="fa fa-instagram"></i><span class="span-social">Twitter</span></a></li>
                <li class="list-item"><a href="#"><i class="fa fa-facebook"></i><span class="span-social">Twitter</span></a></li>
                <li class="list-item"><a href="#"><i class="fa fa-github"></i><span class="span-social">Twitter</span></a></li>
            </ul>

CSS：

.social ul a {
  display: block;
  padding: 1em 1em;
  background-color: #fca311;
  color: white;
}

ul a .span-social {
  display: none;
  opacity: 0;
  margin-left: 5px;
  -webkit-transition: display .5s linear, opacity .33s linear;
  transition: display .5s linear, opacity .33s linear;
}

ul a .show {
  display: inline-block;
  opacity: 1;
}

JS：

            var x = document.getElementsByClassName('list-item');
            for (var i = 0; i < x.length; i++) {
                x[i].addEventListener('mouseover', () => {
                    var li = document.getElementsByClassName('span-social');
                    for (var i = 0; i < li.length; i++) {
                        var showli = li[i];

                        if (showli.style.display === "none") {
                            showli.className = "span-social show";
                        } else {
                            showli.className = "span-social";
                        }
                    }
                })
            }

但我不能让它工作，我在控制台中检查它，没有发现错误。试图遍历列表并特别处理每个项目（添加事件 mouseover ）但仍然没有效果。