Skip to content

Instantly share code, notes, and snippets.

@andreip1
Created July 1, 2020 10:55
Show Gist options
  • Save andreip1/a70a9a0740373163f3072b523cbf1e27 to your computer and use it in GitHub Desktop.
Save andreip1/a70a9a0740373163f3072b523cbf1e27 to your computer and use it in GitHub Desktop.
Social Media Bar
document.querySelectorAll("div").forEach((el) => {
el.addEventListener("mouseenter", function (e) {
e.target.querySelector("i").style.display = "inline";
e.target.style.paddingTop = "15px";
switch (e.target.id) {
case "one":
e.target.style.backgroundColor = "#1da1f2";
break;
case "two":
e.target.style.backgroundColor = "#3b5998";
break;
case "three":
e.target.style.backgroundColor = "#24292e";
break;
case "four":
e.target.style.backgroundColor = "#0072b1";
break;
case "five":
e.target.style.backgroundColor = "#E1306C";
break;
case "six":
e.target.style.backgroundColor = "#c4302b";
break;
}
});
el.addEventListener("mouseleave", function (e) {
e.target.style.paddingTop = "0px";
e.target.querySelector("i").style.display = "none";
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/fontawesome-iconpicker/3.2.0/js/fontawesome-iconpicker.min.js"></script>
<h3>Hover/touch to discover</h3>
<main>
<div id="one"><a href="#"><i class="fab fa-twitter hidden"></i></a></div>
<div id="two"><a href="#"><i class="fab fa-facebook hidden"></i></a></div>
<div id="three"><a href="#"><i class="fab fa-github hidden"></i></a></div>
<div id="four"><a href="#"><i class="fab fa-linkedin hidden"></i></a></div>
<div id="five"><a href="#"><i class="fab fa-instagram hidden"></i></a></div>
<div id="six"><a href="#"><i class="fab fa-youtube hidden"></i></a></div>
</main>
<h4>Social media bar &copy; Andrei Swishyfishie 2020</h4>
<script src="https://kit.fontawesome.com/72e4802971.js" crossorigin="anonymous"></script>
main {
height: 150px;
display: flex;
justify-content: center;
align-items: flex-end;
}
div {
&#one,
&#two,
&#three,
&#four,
&#five,
&#six {
height: 10px;
width: 50px;
background-color: lightgrey;
transition: height 0.2s;
text-align: center;
&:hover {
height: 50px;
}
a {
text-decoration: none;
}
i {
height: 100%;
display: none;
color: whitesmoke;
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment