Список предметов, меняющих классы при наведении - PullRequest
Новая
       14

Список предметов, меняющих классы при наведении

0 голосов
/ 14 марта 2020

Итак, у меня есть следующие коды 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";
                        }
                    }
                })
            }

Но я могу не заставить это работать, я проверяю это в консоли, никаких ошибок не поймано. Пытался l oop просмотреть список и обработать каждый элемент отдельно (добавить указатель мыши на событие), но безрезультатно.

...