悬停 CSS 中的类答案

【问题标题】：Class within hover CSS悬停 CSS 中的类
【发布时间】：2015-04-06 07:05:49
【问题描述】：

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

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

.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 代码用于仅在里面的类进行悬停？或者我可以在悬停类中设置类的样式吗？

【问题讨论】：

【解决方案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>

【讨论】：