html - 悬停 CSS 中的类

Question

我想在使用悬停时从 sprite 贴图中切换图像。图像是类。到目前为止我已经

(我有多个图像都带有悬停图像。)

.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;
}

我是否应该先为第二张图片声明定位，然后编写一个仅包含类的 hover 的 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>