悬停CSS中的类

Question

我想在使用悬停时从精灵地图切换图像。图像是类。到目前为止我已经

了

（我有多张图片都带有悬停图片。）

.contact-icon, .contact-icon-2, .help-icon, .help-icon-2{
background: url(sprites.png) no-repeat;}

- 第一张图片的位置

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

-

.contact-icon:hover, .contact-icon:active{
    .contact-icon-2{
    background-position: -95px -75px ;
    width: 66px; 
    height: 66px;
  }
}

或者

.contact-icon:hover, .contact-icon:active ~ .contact-icon-2{
    background-position: -95px -75px ;
    width: 66px; 
    height: 66px;
}

我应该首先为第二个图像声明定位，然后编写一个css代码，用于悬停只有里面的类吗？或者我可以在悬停类中设置类的样式吗？

Answer 1

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

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

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

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

然后为每个hover行动：

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

在你的html中使用它：

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