gpt4 book ai didi

html - 悬停 CSS 中的类

转载 作者:行者123 更新时间:2023-11-28 08:06:24 25 4
gpt4 key购买 nike

我想在使用悬停时从 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 代码?或者我可以只在悬停类中设置类的样式吗?

最佳答案

创建一个具有图标通用属性的类,例如:

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

关于html - 悬停 CSS 中的类,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29466890/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com