Html 悬停CSS中的类

我想在使用悬停时切换精灵贴图中的图像。图像是类。到目前为止我有

（我有多个图像，都带有悬停图像。）

-第一幅图像的定位

.contact-icon{
background-position: 0 -77px ;
width: 66px;
height: 66px;}  

-

或

---

我是否应该首先声明第二个图像的位置，然后编写一个仅包含该类的悬停css代码？或者我可以在hover类中设置类的样式吗？

创建一个具有图标公共属性的类，如：

.sprite { 
  background: url(sprites.png) no-repeat; 
  width: 66px; 
  height: 66px; 
  display:inline-block;
}

然后为每个图标创建唯一的类：

.contact-icon{
  background-position: 0 -77px ;
}

然后将

悬停

操作分别用于：

.contact-icon:hover{
  background-position: -95px -75px ;
}

在html中像这样使用它：

<a href="#" class="sprite contact-icon"></a>

您能创建一个提琴吗？理解您的需求有点困难，但您不应该在每个图标或悬停/活动阶段重复css的常见属性。

.contact-icon{
  background-position: 0 -77px ;
}

.contact-icon:hover{
  background-position: -95px -75px ;
}

<a href="#" class="sprite contact-icon"></a>