在标题中的社交图标上添加悬停效果？

Question

我希望像此网站http://lalomacd.com.mx/2013/

一样在标题中制作悬停效果社交图标

请问我能获得HTML代码和CSS吗？

此致

二万

Answer 1

您可以查看以下链接。

Fiddle

    .header-social{
    background: #000;
    padding: 10px;
}
a {
    color: #000;
    text-decoration:none;
}
.fa {
    color: #000;
    border: 1px solid #000;
    border-radius: 15px;
    background: #fff;
    padding: 5px;
}

/*--Padding to help round out the icon's circle border--*/
span.fa-facebook {
  padding: 5px 8px;
}
span.fa-play {
  padding: 5px 6px 5px 8px;
}

/*--Hover Effects for each icon--*/
.fa:hover{
    color:#FFF;
    transition: background 1s ease;
}
.fa-facebook:hover{
    background:#3b5998;
}
.fa-twitter:hover{
    background: #55acee;
}
.fa-google-plus:hover{
    background: #dd4b39;
}
.fa-play:hover{
    background: #cd201f;
}

如果您想了解更多信息，请参阅以下链接。

Link