javascript - 超棒的社交媒体按钮悬停效果

Question

一些网站对其社交媒体按钮有影响，一旦用户将鼠标悬停在其上，该按钮就会变为原始 Logo 的颜色。例如，我的 Facebook 按钮目前是黑白的，但当用户将鼠标悬停在它上面时，我希望它能过渡到原来的 Facebook 蓝白色。

HTML 的相关部分

<div class="socialmedia">
            <a href="mailto:tarik.kdiry@gmail.com" title="Email">
                <i class="fa fa-envelope-o"></i>
            </a>
            <a href="https://www.facebook.com/Tarik.Kdiry" target="_blank" title="Facebook">
                <i class="fa fa-facebook"></i>
            <a href="https://twitter.com/GalacticWizrdry" target="_blank" title="Twitter">
                <i class="fa fa-twitter"></i>
            </a>
            <a href="https://www.instagram.com/tarik_kdiry/" target="_blank" title="Instagram">
                        <i class="fa fa-instagram" aria-hidden="true"></i>
            </a>
            <a href="https://www.linkedin.com/in/tarik-kdiry-0b62b8100" target="_blank" title="LinkedIn">
                <i class="fa fa-linkedin"></i>
            </a>
            <a href="https://github.com/tarikkdiry" target="_blank" title="Github">
                <i class="fa fa-github"></i>
            <a href="https://www.pinterest.com/tarikkdiry/" target="_blank" title="Pinterest">
                <i class="fa fa-pinterest"></i>
            </a>
        </div>

CSS

body {
  margin: 0;
  text-align: center;
  color: #f7f7f7;
  background: url(citybackground.jpg) no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  margin-top: 10%;
  margin-bottom: 10%;
}

.referral {
  color: white;
  font-family: 'PT Sans Narrow', sans-serif;
  font-size: 20px;
  font-weight:20;
  margin-top: 5px;
}

h1 {
  color: white;
  font-family: 'PT Sans Narrow', sans-serif;
  margin: 0;
  font-weight: 400;
  font-size: 100px;
}

h2, h3 {
    color: white;
    font-family: 'PT Sans Narrow', sans-serif;
  margin: 0;
  font-weight: 400;
  font-size: 25px;
}

head {
  text-align: center;
  color: white;
}

.me {
    height: 1000px;
    width: 1000px;
    border-radius: 100%;
    align: center;
    position: relative;
    top: 35px;
    right: 18px;
}

.me:hover {
    -webkit-filter: grayscale(0%);
    filter: grayscale(0%);
}

.info {
    font-size: 30px;
    display: inline;
    margin-top: 30px;
    margin: 0 auto;
}


.info a {
    background-color: #f7f7f7;
    border-radius: 15px;
    margin: 6px 6px;
    width: 10px;
    height: 10px;
    line-height: 30px;
    padding: 16px;
    display: inline-block;
    transition: background-color .3s ease, color .3s ease;
    color: #222;
}

.info a:hover, .social a:focus {
    outline: none;
    background-color: #536569;
    color: #536569;
}
.socialmedia {
    display: inline;
    margin-top: 30px;
}


.socialmedia a {
    background-color: #f7f7f7;
    border-radius: 35px;
    margin: 6px 6px;
    width: 36px;
    height: 36px;
    line-height: 30px;
    padding: 16px;
    display: inline-block;
    transition: background-color .3s ease, color .3s ease;
    color: #222;
}

.socialmedia a:hover, .social a:focus {
    outline: none;
    background-color: #536569;
    color: #536569;
}

.socialmedia a .fa {
    font-size: 2.2em;
}

@font-face {
  font-family: "foundation-icons";
  src: url("../fonts/foundation-icons.eot");
  src: url("../fonts/foundation-icons.eot?#iefix") format("embedded-opentype"),
       url("../fonts/foundation-icons.woff") format("woff"),
       url("../fonts/foundation-icons.ttf") format("truetype"),
       url("../fonts/foundation-icons.svg#fontcustom") format("svg");
  font-weight: normal;
  font-style: normal;
}

Answer 1

这是您需要添加的内容，以在悬停时更改社交网络图标的原始颜色

.socialmedia a:hover > .fa-envelope-o{
  color:red;
}
.socialmedia a:hover > .fa-facebook{
  color:#3b5998;
 }
.socialmedia a:hover > .fa-twitter{
  color:#55acee;
}
.socialmedia a:hover > .fa-instagram{
  color:#5851db;
}
.socialmedia a:hover > .fa-linkedin{
  color:#0077b5;
}
.socialmedia a:hover > .fa-linkedin{
  color:#0077b5;
}
.socialmedia a:hover > .fa-github{
  color:#333333;
}
.socialmedia a:hover > .fa-pinterest{
  color:#bd081c;
}

body {
  margin: 0;
  text-align: center;
  color: #f7f7f7;
  background: url(citybackground.jpg) no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  margin-top: 10%;
  margin-bottom: 10%;
}

.referral {
  color: white;
  font-family: 'PT Sans Narrow', sans-serif;
  font-size: 20px;
  font-weight:20;
  margin-top: 5px;
}

h1 {
  color: white;
  font-family: 'PT Sans Narrow', sans-serif;
  margin: 0;
  font-weight: 400;
  font-size: 100px;
}

h2, h3 {
    color: white;
    font-family: 'PT Sans Narrow', sans-serif;
  margin: 0;
  font-weight: 400;
  font-size: 25px;
}

head {
  text-align: center;
  color: white;
}

.me {
    height: 1000px;
    width: 1000px;
    border-radius: 100%;
    align: center;
    position: relative;
    top: 35px;
    right: 18px;
}

.me:hover {
    -webkit-filter: grayscale(0%);
    filter: grayscale(0%);
}

.info {
    font-size: 30px;
    display: inline;
    margin-top: 30px;
    margin: 0 auto;
}


.info a {
    background-color: #f7f7f7;
    border-radius: 15px;
    margin: 6px 6px;
    width: 10px;
    height: 10px;
    line-height: 30px;
    padding: 16px;
    display: inline-block;
    transition: background-color .3s ease, color .3s ease;
    color: #222;
}

.info a:hover, .social a:focus {
    outline: none;
    background-color: #536569;
    color: #536569;
}
.socialmedia {
    display: inline;
    margin-top: 30px;
}


.socialmedia a {
    background-color: #f7f7f7;
    border-radius: 35px;
    margin: 6px 6px;
    width: 36px;
    height: 36px;
    line-height: 30px;
    padding: 16px;
    display: inline-block;
    transition: background-color .3s ease, color .3s ease;
    color: #222;
}

.socialmedia a:hover, .social a:focus {
    outline: none;
    background-color: #536569;
}

.socialmedia a .fa {
    font-size: 2.2em;
}

.socialmedia a:hover > .fa-envelope-o{
  color:red;
}
.socialmedia a:hover > .fa-facebook{
  color:#3b5998;
}
.socialmedia a:hover > .fa-twitter{
  color:#55acee;
}
.socialmedia a:hover > .fa-instagram{
  color:#5851db;
}
.socialmedia a:hover > .fa-linkedin{
  color:#0077b5;
}
.socialmedia a:hover > .fa-linkedin{
  color:#0077b5;
}
.socialmedia a:hover > .fa-github{
  color:#333333;
}
.socialmedia a:hover > .fa-pinterest{
  color:#bd081c;
}


@font-face {
  font-family: "foundation-icons";
  src: url("../fonts/foundation-icons.eot");
  src: url("../fonts/foundation-icons.eot?#iefix") format("embedded-opentype"),
       url("../fonts/foundation-icons.woff") format("woff"),
       url("../fonts/foundation-icons.ttf") format("truetype"),
       url("../fonts/foundation-icons.svg#fontcustom") format("svg");
  font-weight: normal;
  font-style: normal;
}

<link href ="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.css" rel="stylesheet">
<div class="socialmedia">
            <a href="mailto:tarik.kdiry@gmail.com" title="Email">
                <i class="fa fa-envelope-o"></i>
            </a>
            <a href="https://www.facebook.com/Tarik.Kdiry" target="_blank" title="Facebook">
                <i class="fa fa-facebook"></i>
            <a href="https://twitter.com/GalacticWizrdry" target="_blank" title="Twitter">
                <i class="fa fa-twitter"></i>
            </a>
            <a href="https://www.instagram.com/tarik_kdiry/" target="_blank" title="Instagram">
                        <i class="fa fa-instagram" aria-hidden="true"></i>
            </a>
            <a href="https://www.linkedin.com/in/tarik-kdiry-0b62b8100" target="_blank" title="LinkedIn">
                <i class="fa fa-linkedin"></i>
            </a>
            <a href="https://github.com/tarikkdiry" target="_blank" title="Github">
                <i class="fa fa-github"></i>
            <a href="https://www.pinterest.com/tarikkdiry/" target="_blank" title="Pinterest">
                <i class="fa fa-pinterest"></i>
            </a>
        </div>