Question

我正在尝试创建一个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>

我不知道我哪里出错了。我还在学习，所以感谢任何帮助。

注意：所有图标均为64像素x 64像素。

my sprite image

Answer 1

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

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

在nav标签中使用精灵

1 个答案: