使用CSS Sprite的Onmouseout和OnmouseOver图像

Question

我有以下图片，我想把它变成CSS Sprite：

define

我的CSS是

<img height="32" width="139" border="0" onmouseout="this.src='/images/top_menu/nav03.gif';" onmouseover="this.src='/images/top_menu/nav04.gif';" src="/images/top_menu/nav03.gif" />

}

.sprite-top_menu {
background-image: url(top_menu.png);
background-repeat: no-repeat;
/*display: block;*/

}

.sprite-nav03-top_menu {
width: 139px;
height: 32px;
background-position: 0 -32px;

}

最好的方法是什么？

Answer 1

<img>标签不适合精灵，我建议这样做：

<div class="sprite-top_menu"></div>

CSS

.sprite-top_menu {
  background: url(top_menu.png) no-repeat;
  width: 139px;
  height: 32px;
  background-position: 0 -32px;
}

.sprite-top_menu:hover {
  background-position: -139px -32px;
}