I'm in the process of creating an HTML navigation bar that utilizes sprites for social media icons.
Currently, I have successfully implemented my navigation bar with individual social media icons in HTML as shown below:
<nav>
<a href="https://www.facebook.com" target="_blank"><img src="icons/64/facebook_icon.png" onmouseover="this.src='icons/64/facebook_icon_hover.png'" onmouseout="this.src='icons/64/facebook_icon.png'" /></a>
<a href="https://www.twitter.com" target="_blank"><img src="icons/64/twitter_icon.png" onmouseover="this.src='icons/64/twitter_icon_hover.png'" onmouseout="this.src='icons/64/twitter_icon.png'" /></a>
<a href="https://www.linkedin.com" target="_blank"><img src="icons/64/linkedin_icon.png" onmouseover="this.src='icons/64/linkedin_icon_hover.png'" onmouseout="this.src='icons/64/linkedin_icon.png'" /></a>
<a href="https://plus.google.com" target="_blank"><img src="icons/64/googleplus_icon.png" onmouseover="this.src='icons/64/googleplus_icon_hover.png'" onmouseout="this.src='icons/64/googleplus_icon.png'" /></a>
</nav>However, when attempting to implement the sprite version of the icons, I encountered issues:
#facebook {
width: 64px;
height: 64px;
background: url("images/sprite/64/sprite_original.png") 0 0;
}
#twitter {
width: 64px;
height: 64px;
background: url("images/sprite/64/sprite_original.png") -64px 0;
}
#linkedin {
width: 64px;
height: 64px;
background: url("images/sprite/64/sprite_original.png") -128px 0;
}
#googleplus {
width: 64px;
height: 64px;
background: url("images/sprite/64/sprite_original.png") -192px 0;
}
#facebook:hover {
background: url("sprite/64/sprite_original.png") 0 -64px;
}
#twitter:hover {
background: url("sprite/64/sprite_original.png") -64px -64px;
}
#linkedin:hover {
background: url("sprite/64/sprite_original.png") -128px -64px;
}
#googleplus:hover {
background: url("sprite/64/sprite_original.png") -192px -64px;
}<nav>
<a id="facebook" href="https://www.facebook.com" target="_blank"></a>
<a id="twitter" href="https://www.twitter.com" target="_blank"></a>
<a id="linkedin" href="https://www.linkedin.com" target="_blank"></a>
<a id="googleplus" href="https://plus.google.com" target="_blank"></a>
</nav>I am seeking assistance because I'm unsure where I've made a mistake. As a beginner, any guidance is greatly appreciated.
Please note: All icons are sized at 64px by 64px.