0
某些網站對其社交媒體按鈕有影響，一旦用戶將鼠標懸停在其上，該按鈕將更改爲原始標誌的顏色。例如，我的Facebook按鈕目前是黑白色，但是當用戶將它懸停在它上面時，我希望它能夠轉換爲原始的Facebook藍色和白色。字體真棒社交媒體按鈕懸停效果
的HTML的相關部分
<div class="socialmedia">
<a href="mailto:[email protected]" 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;
}
@如果Tarik Kdiry爲你工作，他接受這個答案。 – frnt