0

So i have a code from my website:

<ul class="list-group col-6">
                <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>

JS:

function showSocial() {
  var x = document.getElementsByClassName("span-social");
  if (x.style.display === "none") {
    x.className = "show";
  } else {
    x.className = "span-social";
  }
}
var x = document.getElementsByClassName("list-group").children;
x.addEventListener("mouseover", showSocial());

CSS:

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

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

ul a .show {
  display: inline-block;
  opacity: 1;
  -webkit-transition-delay: 0s;
          transition-delay: 0s;
}

But it seems that the js doesn't work , i tried with jquery hide and show events but i want to change the class especially because i have an animation here

Vicol Cristian
  • 95
  • 1
  • 8
  • `getElementsByClassName` returns a collection, not an element. You'll have to iterate over the collections. Also `.addEventListener("mouseover", showSocial());` will invoke the function immediately - you want to just *pass* the function to `addEventListener` – CertainPerformance Mar 14 '20 at 09:21
  • I tried something , i don't get errors but it seems to not work function showSocial() { var li = document.getElementsByClassName('span-social'); for (i = 0; i < li.length; i++) { var showli = li[i]; if (showli.style.display === "none") { showli.classList.add("span-social show"); } else { showli.className = "span-social"; } } } var x = document.getElementsByClassName('list-item'); for (var i = 0; i < x.length; i++) { x[i].addEventListener('mouseover', showSocial()) } – Vicol Cristian Mar 14 '20 at 11:00
  • See the last part of my comment: *.addEventListener("mouseover", showSocial()); will invoke the function immediately - you want to just pass the function to addEventListener* – CertainPerformance Mar 14 '20 at 11:02

0 Answers0