字体真棒社交媒体按钮悬停效果

时间：2016-07-21 13:52:53

标签： javascript html css

某些网站会对其社交媒体按钮产生影响，一旦用户将鼠标悬停在其上，该按钮就会更改为原始徽标的颜色。例如，我的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;
}

3 个答案:

答案 0 :(得分：0)

这是您需要添加以更改hover上的社交网络图标原始颜色 

.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;
}

＆＃13;
＆＃13; 
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;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：0)

在.socialmedia a .fa的CSS块中，您正在更改FontAwesome图标的字体大小 - 您可以在此处添加代码以更改颜色：

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

.socialmedia a:hover .fa-facebook {
  color: #4267B2;
}

答案 2 :(得分：0)

这是我的SCSS文件“ _fontawesome-social-colors.scss”，我导入了我的网站：

/*
 * CSS Snipped for display logo color brand on HOVER for font awesome social media icons
 * List is obviously incomplete
 *
*/
a {
  &:hover, &:focus {
    > i {
      &.fa-facebook-square,
      &.fa-facebook {
        color: #3b5998;
      }
      &.fab.fa-facebook-messenger {
        color: #0084ff;
      }
      &.fa-youtube {
        color: #ff0000;
      }
      &.fa-twitter {
        color: #4099ff;
      }
      &.fa-envelope-o,
      &.fas.fa-envelope {
        color: red;
      }
      &.fa-twitter {
        color: #55acee;
      }
      &.fa-instagram {
        color: #5851db;
      }
      &.fa-linkedin {
        color: #0077b5;
      }
      &.fa-github {
        color: #333333;
      }
      &.fa-pinterest {
        color: #bd081c;
      }
      &.fa-whatsapp {
        color: #25d366;
      }
    }
  }
}

根据自己的喜好更改

相关问题
最新问题