【发布时间】：2016-07-21 13:52:53
【问题描述】：
有些网站在其社交媒体按钮上具有效果，一旦用户将鼠标悬停在其上，该按钮就会变为原始徽标的颜色。例如，我的 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;
}
【问题讨论】：
标签： javascript html css