html - 在导航标签中使用 Sprite

我正在尝试创建一个html导航栏，使用精灵作为社交媒体图标。
我的导航栏和个人社交媒体图标在html中正常工作，如下所示：

<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>

但当我尝试使用我的精灵版本时，它不起作用：

#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>

我不知道我错在哪里了。我还在学习，所以我很感激你的帮助。
注：所有图标为64px x x 64px。
my sprite image

最佳答案

尝试将display:inline-block;或display: block;添加到类似css的元素中

#facebook,#twitter,#linkedin,#googleplus{
     display: block;
}